CODEWITHSUNDEEP
javascripthtmlcsshover
John
John

Reputation: 177

On Hover Move The Text Up

So I'm trying to move up the text when you hover over the image but I can't seem to get it to work. I tried using :hover and then using padding-bottom to move it up but it didn't work. So I basically want the text "Nature" or "Bengal Tiger" to move up when you hover over the image. Here's a pic that illustrates what I want to achieve.

Here's the code

http://jsfiddle.net/Qf4Ka/10/

HTML

<section id="top-container" class="top-column" style="width:1050px; height:400px; ">

<div class="image" style="float:left;"><img src="http://www.hdwallpapersinn.com/wp-content/uploads/2012/09/HD-Wallpaper-1920x1080.jpg" border="0"; width="263"; height="200" style="display: block; border-top: 1px solid #dddddd; border-bottom: 1px solid #dddddd; border-right: 1px solid #dddddd;">
<h4 style="font-size:30px; top: 90px; ">Nature</h4>
</div>

<div class="image" style="float:left;"><img src="http://www.hdwallpapersart.com/wp-content/uploads/2013/04/tiger_wallpapers_hd_Bengal_Tiger_hd_wallpaper1.jpg" border="0"; width="262"; height="200" style="display: block; border-top: 1px solid #dddddd; border-bottom: 1px solid #dddddd; ">
<h4 style="font-size:30px; top: 90px;">Bengal Tiger</h4>
</div>

</section>

CSS

.image { 
   position: relative; 

}

h4 { 
   position: absolute;    
   width: 100%; 
   color: #fff;
   float: left;   
   position: absolute;      
   font-size: 40px;
   font-family: "Oswald";
   text-align: center;
   max-height:auto;
   z-index:20;
   text-shadow:1px 1px 2px #000;
   -moz-text-shadow:1px 1px 2px #000;
   -ms-text-shadow:1px 1px 2px #000;
   -o-text-shadow:1px 1px 2px #000;
   -webkit-text-shadow:1px 1px 2px #000;

}

.image { 
   position: relative; 

}

.image:before{
content:'';
box-shadow:0 0 50px 4px #000 inset;
-moz-box-shadow:0 0 50px 4px #000 inset;
-webkit-box-shadow:0 0 50px 6px #000 inset;
float:left;
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
z-index:20;
cursor: pointer;

}

.image:hover:before {
    box-shadow:0 0 100px 30px #000 inset;
    -moz-box-shadow:0 0 100px 30px #000 inset;
    -webkit-box-shadow:0 0 100px 30px #000 inset;
    transition: all 1s;
    -webkit-transition: all 1s;
}

Upvotes: 0

Views: 3384

Answers (2)

TAS
TAS

Reputation: 2079

The text is placed absolutely relative to the div.image element using top:90px. Adding padding at the bottom will not change this, it will only add some padding below the text. You can see this if you add a visible border to the text.

The easiest way to handle this is to change the top position of the text when the mouse hovers the image. See the udpated fiddle.

NOTE: I've only updated the first image so that you can compare the two elements to see the difference.

Upvotes: 0

Danield
Danield

Reputation: 125561

How about something like this:

.image:hover h4 {
    margin-top: -50px;
}

FIDDLE

Upvotes: 2

Related Questions