HTML/CSS Text über Bild center blur?

Ich möchte in eine Tabelle eine Bild einfügen. Über das Bild soll gehovered werden, um es einen blur zu geben.

Beim Hovern soll in der Mitte des Bildes ein Text erscheinen, der sich immer in der Mitte des Bildes befindet, unabhängig davon wie groß das Fenster ist.

Vielen Dank

1 Antwort

Vom Beitragsersteller als hilfreich ausgezeichnet

MrAmazing2

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

Computer, HTML, programmieren

03.02.2022, 18:26

HTML:

<div class="myImg">
  <img src="https://upload.wikimedia.org/wikipedia/commons/6/60/Earth_from_Space.jpg" width=200 height=200>
  <span>Die Erde</span>
</div>

CSS:

.myImg {
  position: relative;
  display: inline-block;
}
.myImg > span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  visibility: hidden;
}
.myImg:hover > img {
  filter: blur(4px);
}
.myImg:hover > span {
  visibility: visible;
}

Hier kannst du's ausprobieren: https://jsfiddle.net/h0wtxvmp/

Woher ich das weiß:Hobby – Programmieren ist mein Hobby & Beruf

Gamco

Beitragsersteller

03.02.2022, 19:13

Zu erst einmal Vielen Dank
Ich habe das Bild in einer Tabelle und möchte dass es möglich ist durch Klicken an irgendeine Stelle in der Zelle, dass es zu einer anderen Webseite geht. Aktuell muss ich immer auf das Bild drücken und das Bild füllt auch nicht die komplette Zelle aus.
Wie kann ich href auf eine komplette Zelle zuweisen und nicht nur auf einen kleinen Teil?

Gamco

Beitragsersteller

03.02.2022, 19:21

@Gamco

Hat sich erledigt, ich weiße einfach <th> die Klasse zu

Trotzdem vielen Dank

MrAmazing2

03.02.2022, 19:43

@Gamco

Passt ^^

Gerne

Ähnliche Beiträge

HTML CSS Hover Animation?

Hallo. Ich versuche eine eigene Website zu erstellen mit HTML und CSS. Nun bin ich auf ein Problem gestoßen. Ich versuche seit langem eine Hover Animation auf ein Text einzufügen. Den CSS Code habe ich von der Webseite ui-snippets.dev . Ich bekomme die Hover Animation nicht zum Funktionieren. Die Animation kommt nur wenn ich beim content ein Text eingebe. Dann ist aber die Animation viel zu groß, da die große vom eingegeben Content Text benutz wird.

Bilder vom Code im Anhang.

...zum Beitrag

css hover effekt geht nicht...warum?

Ich bin gerade am html/css/php lernen und bin auf ein total simples Problem gestoßen, welches ich aber bei bestem willen nicht gelöst bekomme.

Die Pseudoklasse :hover will einfach nicht tun....

Das ist die style.css.

.navigation_schrift{
    display:block;
    float:left;
    text-align: center
    font-family: courir;
    font-size:150%;
    width: 100%;height:40px;
    color: red;
    background-image: url("../images/aquabutton1.gif");
    margin: 0px 0px 3px 0px;
    text-decoration:none;
}

.navigation_schrift:hover{
    color: green;
}

und so wird das ganze aufgerufen:

Testtext

Alles andere was ich über CSS mache funktioniert einwandfrei (wenn ich es richtig gemacht habe :D)

Warum wechselt die Schriftfarbe bei mouseover nicht auf grün?

Ich habe sowohl Firefox 5.0.1 als auch IE9 versucht...

Gruß BluBb_mADe

...zum Beitrag

Wie kann ich diese Navbar fixieren?

Hallo,

ich mache gerade meine erste Website und kenne mich noch sehr wenig mit HTML/CSS aus. Ich schaffe es leider nicht, dass meine Navigation beim runter scrollen oben fixiert bleibt. Wie kann man das ausschließlich mit HTML und CSS (also kein Javascript oder so) beheben?

Hier der HTML-Code:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Unser Shop</title>
  <link rel="stylesheet" href="styles.css" type="text/css">
</head>


<body>


<div class="topnav">
  <img src="test.png" alt="test" width="100" height="40" style="float:left; margin-right:25px;">
  <a class="active" href="index.html">Willkommen</a>
  <a href="products.html">Unsere Produkte</a>
  <a href="about-us.html">Über uns</a>
</div>


<div class="page">
<p> Willkommen! </p>
</div>




</body>
</html>

Und hier der CSS-Code:

body {
  background-color: green;
  margin: 0px;
}


/* Add a black background color to the top navigation */
.topnav {
  background-color: #333;
  overflow: hidden;
}


/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}


/* Change the color of links on hover */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}


/* Add a color to the active/current link */
.topnav a.active {
  background-color: #4CAF50;
  color: white;
}


.page {
  background-color: white;
  margin-right: 125px;
  margin-left: 125px;
  padding-bottom: 85%;
}

...zum Beitrag

Text unsichtbar html css?

Hi, ich prgrammiere eine website in html und css.

ich habe einen container und eine box erstellt und will dass man nur das hintergundbilt und ein text sieht sieht und wenn man drauf geht mit :hover dass dann ein andere text erscheint. wäre dass möglich?

...zum Beitrag

Html Tabelle In die mitte?

Weiß jemand Wie ich in html(css) eine Tabelle in die Mitte Tun kann

Danke im voraus

...zum Beitrag

Text auf Bild in HTML einfügen?

Ich möchte in HTML oder auch CSS, dass es so aussieht:

Wie man erkennen kann Ein Bild mit einem Text drauf

...zum Beitrag

Wie löse ich das Problem mit dem Bildaustausch (hover, etc.)?

Hallo,

ich versuche in CSS ein Hintergrundbild auszutauschen bei hover, active, etc.
Leider klappt es aber nicht, da bei besuchten Links dennoch das Hintergrundbild angezeigt wird, welches aber nur angezeigt werden soll, wenn der Link noch nicht geöffnet wurde.

So sieht der Code aus (body):

<div>
      <ul>
        <li><a href="xyz" class="img-link" title="xyz">xyz</a><br/></li>

Bei der Klasse in css habe ich es dann so probiert:

a.img-link{
  display: inline-block;
  background: url(../img/li-button-blue.png);
  margin: 0 auto;
  text-align: center;
}
a.img-link:visited {
  background: url(../img/li-button-yellow.png);
}
a.img-link:hover {
  background: url(../img/li-button-red.png);
}
a.img-link:active {
  background: url(../img/li-button-lightblue.png);
}
a.img-link:focus {
  background: url(../img/li-button-green.png);

Vielleicht kann ja jemand helfen, ist wahrscheinlich total einfach.

Vielen Dank.

...zum Beitrag

Transparente bilder in html css einfügen?

hallo wie kann ich diese Bild in html einfügen so das man die Kästchen nicht mehr sieht so das es transparent wird

...zum Beitrag

html/css text dynamisch anpassen?

hallo,
Weis jemand wie man Texte dynamisch der Bildschirmgröße anpassen kann? So wie bei div-containern oder Grafiken.

...zum Beitrag

HTML/CSS, Bilder werden nicht angezeigt?

Ich habe im <body> mehrere divs, in denen abwechselnd divs und Texte untereinander angezeigt werden sollen. Die Bilder sollen auf voller Höhe sein (height: 100vh;). Wenn ich die Bilder mit <img src=""> im HTML Code im div einfüge, wird es angezeigt. Will ich es aber in meiner CSS Datei als background-image vom div einfügen, wird der Bereich, wo das Bild sein sollte, einfach nur grau. Die style.css ist richtig in der HTML-Datei angegeben, da andere Styles funktionieren. Der Pfad ist ebenfalls richtig angegeben. Hat jemand Ideen, was ich falsch mache? :(

...zum Beitrag

html/css hintergrund verschwommen machen mit filter: blur()?

ich habe bei der css datei:

body{

background-image:url(background.gif) ;

genommen und logischerweise wird die navigation oben von der website auch verschwommen, wenn ich filter: blur() eingebe. wie mache ich dies nur für den hintergrund?

...zum Beitrag

Tabelle in html mit CSS verschieben?

Habe eine Tabelle:

<table class="anker"

<tr>

<td>Anker 1</td>

</tr>

wollte die tabelle dann mit css:

table.anker{

margin-top: 50px;}

verschieben, aber wenn verschoben wird verschwinden die rahmen von der Tabelle

...zum Beitrag

CSS background gif UND background color?

Halloo, Eine Frage zu CSS, wie man im Titel schon erkennen kann :)

Undzwar habe ich folgendes Programm geschrieben:

html, body {
 margin: 0;
 padding: 0;
}

.hintergrund {
 background: url(bla.gif) no-repeat center center;
 background-size: cover;
 height: 350px;
 text-align: center;
}

So, mein Wunsch wäre es unter dem Gif noch die Hintergrundfarbe zu ändern.. Weiß jmd wie das funktioniert?

...zum Beitrag

HTML / CSS Bilder bei hover für 5 Sekunden anzeigen?

Wenn ich über Bild "A" Hover will ich, dass bild "B" für 5 Sekunden angezeigt wird und wieder verschwindet. Aber wenn Bild "B" für 5 Sekunden sichtbar ist soll man da drüber hovern und dann sieht man Bild "C" für 5 Sekunden :D Geht das irgendwie ? Wenn ja -> HOW?

...zum Beitrag

Was möchtest Du wissen?

Deine Frage stellen