beta beta - 4 months ago 8
CSS Question

Hover effect over div with image and text

I provide a JSFiddle: https://jsfiddle.net/om83Ljtm/

It contains of a

div
,
img
, and
span
element. The
img
acts as a background-image to the
div
. I do not use CSS
background
-property for the background-image because I want to change the opacity when hovering the
div
. The
span
contains text which overlaps the background image. When hovering the
div
, I want to change the opacity of the image. This works, however, when the mouse hovers the text (
span
), the opacity of the
img
changes back to the initial value 0.6. But I want the image to not (!) change back its opacity when I hover over the text. How can this be achieved?

To sum up: In the JSFiddle, if I hover over the
div
, the opacity changes to 1. This should remain, even if I hover over the text in the
span
. This does not work, yet.

Answer

Use .event:hover img instead of .event img:hover

.event {
  width: 200px;
  position: relative;
  border: 1px solid #dddddd;
  height: auto;
}

.event .titel {
  float:left;
  font-size: 20px;
  background-color:white;
  padding:3px;
  position:absolute;
  top:50px;
  left:5px;
}

.event img {
  opacity: 0.6;
  width: 100%;
}

.event img {
  -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
}

.event:hover img {
  opacity: 1;
}
<div class="event">
   <img src="https://lh4.ggpht.com/wKrDLLmmxjfRG2-E-k5L5BUuHWpCOe4lWRF7oVs1Gzdn5e5yvr8fj-ORTlBF43U47yI=w300">
		<span class="titel">text text text text text text text text text </span>
</div>

Comments