CODEWITHSUNDEEP
htmlcsshovercss-transitions
Darci
Darci

Reputation: 13

Trying to use hover to make an image disappear but text is in the way

On tumblr I am trying to add an image to the bottom of the page that will disappear when moused over. As it disappears I have a block of text the transitions to appear in its place. Right now both are doing these things, but when the text block is moused over the image reappears. I want it to stay completely transparent.

This is in it's current state

#bite
#bite a{
display:block
}
#bite .death {
margin-top:0px;filter: alpha(opacity = 0);
opacity:0;-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;transition: all 0.5s ease-out;
}

#bite:hover .death {
margin-top:0px;
-webkit-transition: all 0.8s ease-out;
-moz-transition: all 0.8s ease-out;
transition: all 0.8s ease-out;
filter: alpha(opacity = 100);
filter: alpha(opacity = 100);
opacity:100;
}

#actualnews {
font-family: 'Rock Salt'; cursive
font-size:5px;
color: #b8b8b8;
width:150px;
height:auto;
padding-top:3px;
border:1px solid#b8b8b8;
margin-left: 30px;
margin-top:10px;
text-align:center;
position:fixed;
    right:145px;
    bottom:70px;
}

#thekey img{
width:150px;
margin-top: -40px;
margin-left: 45px;
position:fixed;
    right:150px;
    bottom:20px;
filter: alpha(opacity = 100);
opacity:100;
-webkit-transition: all 0.8s ease-out;
-moz-transition: all 0.8s ease-out;
transition: all 0.8s ease-out;
}

#thekey img:hover  { 
margin-top:0px;
-webkit-transition: all 0.8s ease-out;
-moz-transition: all 0.8s ease-out;
transition: all 0.8s ease-out;
filter: alpha(opacity = 0);
filter: alpha(opacity = 0);
opacity:0;
}
<div id="bite"> 
<div id="thekey"><img src="{image:thekey}"></div>
<div class="death">
<div id="actualnews">
<a href="www.winngstiel.tumblr.com/tagged/mine" font-color:#9d3e78>MY STUFF</a>
<p>
<a href="www.winngstiel.tumblr.com/tagged/edit" font-color:#9d3e78>PRETTY THINGS</a>
</div>
</div></div>

As you can see the text is somehow in the way. Any help is greatly appreciated as I am very new to how everything with coding works. Any confusion or questions please ask!

Upvotes: 1

Views: 845

Answers (1)

Marcelo
Marcelo

Reputation: 4425

You can change the selector for the CSS rule that hides the image to trigger on #bite's hover.

...
#bite:hover #thekey img  {
...

Full code: 

#bite
#bite a{
display:block
}
#bite .death {
margin-top:0px;filter: alpha(opacity = 0);
opacity:0;-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;transition: all 0.5s ease-out;
}

#bite:hover .death {
margin-top:0px;
-webkit-transition: all 0.8s ease-out;
-moz-transition: all 0.8s ease-out;
transition: all 0.8s ease-out;
filter: alpha(opacity = 100);
filter: alpha(opacity = 100);
opacity:100;
}

#actualnews {
font-family: 'Rock Salt'; cursive
font-size:5px;
color: #b8b8b8;
width:150px;
height:auto;
padding-top:3px;
border:1px solid#b8b8b8;
margin-left: 30px;
margin-top:10px;
text-align:center;
position:fixed;
    right:145px;
    bottom:70px;
}

#thekey img{
width:150px;
margin-top: -40px;
margin-left: 45px;
position:fixed;
    right:150px;
    bottom:20px;
filter: alpha(opacity = 100);
opacity:100;
-webkit-transition: all 0.8s ease-out;
-moz-transition: all 0.8s ease-out;
transition: all 0.8s ease-out;
}

#bite:hover #thekey img  { 
margin-top:0px;
-webkit-transition: all 0.8s ease-out;
-moz-transition: all 0.8s ease-out;
transition: all 0.8s ease-out;
filter: alpha(opacity = 0);
filter: alpha(opacity = 0);
opacity:0;
}
<div id="bite"> 
<div id="thekey"><img src="{image:thekey}"></div>
<div class="death">
<div id="actualnews">
<a href="www.winngstiel.tumblr.com/tagged/mine" font-color:#9d3e78>MY STUFF</a>
<p>
<a href="www.winngstiel.tumblr.com/tagged/edit" font-color:#9d3e78>PRETTY THINGS</a>
</div>
</div></div>

Upvotes: 2

Related Questions