CODEWITHSUNDEEP
htmlcss
Wanting to learn
Wanting to learn

Reputation: 468

append span to hover

How can I append my span to also be effected by my hover transition. I'm trying to get the text from the span to also fade like the image when there is a mouseover

#grid li span {
  color: white;
  display:block;
  bottom:250px;
  position:relative;
  width:180px;
   }

#grid li {
 float: left;
 margin: 0 40px 75px 0px;
 display:inline;
 position:relative;
   }

#grid li a:hover img {
  -webkit-transition: opacity .3s ease-in;
  -moz-transition: opactiy .3s ease-in;
  -ms-transition: opacity .3s ease-in;
  -o-transition: opacity .3s ease-in;
  transition: opacity .3s ease-in;
  opacity: 1;
    }

#grid:hover img {
 -webkit-transition: opacity .3s ease-in;
 -moz-transition: opactiy .3s ease-in;
 -ms-transition: opacity .3s ease-in;
 -o-transition: opacity .3s ease-in;
 transition: opacity .3s ease-in;
 zoom: 1;
 filter: alpha(opacity=100);
 opacity: 0.3;
   }

jsfiddle

Upvotes: 0

Views: 72

Answers (1)

hungerstar
hungerstar

Reputation: 21725

Modify your CSS so all li fade. Then target the one that is being hovered.

http://jsfiddle.net/XYZZx/13/

Change 

#grid:hover img {
     ...transitions...
}

to

#grid:hover li {
     ...transitions...
}

and add

#grid:hover li:hover {
     opacity: 1;
}

Upvotes: 1

Related Questions