CODEWITHSUNDEEP
csscss-transitions
Theo
Theo

Reputation: 25

CSS image opacity transition on text hover

I'm stuck trying to get the image to fade in and out when you hover over/out on the text.

This is the code.

I need help with what to add to make it so the image will transition in from 0 opacity to 1 when the text is hovered over and back again when no longer hovered.

<style>
h1 {
    text-align: center;
    color: #cbd3db;
font-family: "Adobe Caslon Pro", "Hoefler Text", Georgia, Garamond, Times, serif;
text-shadow: 2px 2px 4px #d9e0e7;
text-shadow: 2px 4px 4px #d9e0e7;
font-size: 22pt;
}
  
  h2 {
    text-align: center;
    color: #cbd3db;
font-family: "Adobe Caslon Pro", "Hoefler Text", Georgia, Garamond, Times, serif;
text-shadow: 2px 2px 4px #d9e0e7;
text-shadow: 2px 4px 4px #d9e0e7;
font-size: 18pt;
}
  
p {
    text-align: center;
    color: #cbd3db;
  font-family: "Adobe Caslon Pro", "Hoefler Text", Georgia, Garamond, Times, serif;
}
  
#quote {
    text-align: center;
    color: #97999c;
  font-style: oblique;  
   transition: text-shadow 2s, color 4s ease-in-out;
   
text-shadow: 5px 8px 7px #97999c;
    font-family: "Adobe Caslon Pro", "Hoefler Text", Georgia, Garamond, Times, serif;
	letter-spacing:0.1em;
	text-align:center;
	margin: 40px auto;
	text-transform: lowercase;
	line-height: 145%;
	font-size: 12pt;
	font-variant: small-caps;
position:relative;
}
  
   #quote:hover  {
 color: #cbd3db;
 text-shadow: 10px 10px 7px #97999c;
    transition: text-shadow 2s, color 4s ease-in-out;


  }
   #quote img  {
 
 display: block;
  margin-left: auto;
margin-right: auto; 
opacity: 1;

  }
</style>

<h1>A heading</h1>

<br>

<h2>Another heading</h2>

<div id="quote">"Some text to be hovered over"

  <img class"blood"  src="http://fc05.deviantart.net/fs49/i/2009/198/8/0/Blood_Splatter_Texture_by_iEniGmAGraphics.png"/>
</div>


<br>

Upvotes: 1

Views: 929

Answers (2)

Nilesh Mahajan
Nilesh Mahajan

Reputation: 3516

Here is the fiddle for your requirement : https://jsfiddle.net/rp33r4nt/

to add ease to opacity animation transition is added .

Try following css

#quote img {
    display: block;
    margin - left: auto;
    margin - right: auto;
    transition: opacity 1s ease;
    opacity: 1;
}

#quote:hover img {
    opacity:0
}

Upvotes: 0

GreyRoofPigeon
GreyRoofPigeon

Reputation: 18113

You want the image to be hidden, and upon hover to be displayed, right?

If so, then change 

   #quote img  {

 display: block;
  margin-left: auto;
margin-right: auto; 
opacity: 1;

  }

To:

#quote:hover img {
    opacity: 1;
}
#quote img  {
    display: block;
    margin-left: auto;
    margin-right: auto; 
    opacity: 0;
    transition: all 4s;
}

DEMO

Upvotes: 3

Related Questions