CODEWITHSUNDEEP
htmlcsscss-transitions
theCoder
theCoder

Reputation: 71

How Do I Add CSS Transition Effect to This

I want to implement something similar in this site: http://www.michieldegraaf.com/

When you hover over the images, it transitioned and a hidden div will be revealed. I have done that. But I am having trouble adding transition effect to it. I added it, but it is not showing.

Here is my html:

<div class="company">
    <a href="#">
        <img src="images/bbb.png"/>
        <div class="show">
            <h1>This Text Will Show Upon Hover</h1>
        </div>
    </a>
</div>

Here is my Css code:

a .show{
    display:none;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    color:#f7481b;
}

a:hover .show{
    display:block;
    width:298px;
    height:298px;
    -webkit-transition:all .5s ease-out;
    -moz-transition:all .5s ease-out;
    transition:all .5s ease-out;
}

But the transition is not working.

Upvotes: 0

Views: 306

Answers (3)

user1823761
user1823761

Reputation:

Working jsFiddle Demo

You must change a little your markup:

<div class="box">
    <div class="image"><img src="http://placekitten.com/250/250" /></div>
    <div class="text">
        Hello World
    </div>
    <a href="#"></a>
</div>

And in CSS:

.box {
    position: relative;
    width: 250px;
    height: 250px;
}

.box .image, .box .text, .box a {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.box .text {
    background: #000;
    color: #fff;
    text-align: center;
    font-size: 24px;
    padding-top: 100px;
    opacity: 0;
    transition: opacity 0.5s;
}

.box:hover .text {
    opacity: 1;
}

Upvotes: 2

Roy Sonasish
Roy Sonasish

Reputation: 4599

Try this,

Css

.company .show{
    display:block;
    width:220px;
    height:250px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    color:#f7481b;
    background: rgba(0, 0, 0, 0);
    -webkit-transition: all .30s ease-in;
    -moz-transition: all .30s ease-in;
    -o-transition: all .30s ease-in;
    -ms-transition: all .30s ease-in;   
    transition: all .30s ease-in;
}
.company .show h1{
    opacity: 0;
    -moz-opacity: 0;
    filter:alpha(opacity=0);
    -webkit-transition: all .30s ease-in;
    -moz-transition: all .30s ease-in;
    -o-transition: all .30s ease-in;
    -ms-transition: all .30s ease-in;   
    transition: all .30s ease-in;
}
.company:hover .show{
    background: rgba(0, 0, 0, 0.8);
}
.company:hover .show h1{
    opacity: 10;
    -moz-opacity: 10;
    filter:alpha(opacity=100);
}

html

<div class="company">
<img src="http://static.adzerk.net/Advertisers/bd294ce7ff4c43b6aad4aa4169fb819b.jpg"/>
<div class="show">
<h1>This Text Will Show Upon Hover</h1>
</div>
</div>

jsFiddle File

Upvotes: 0

Yotam Omer
Yotam Omer

Reputation: 15366

You need your transition code on a .show, and use opacity instead of display:

a .show{
    opacity:0;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    color:#f7481b;
    -webkit-transition:all .5s ease-out;
    -moz-transition:all .5s ease-out;
    transition:all .5s ease-out;
    width:298px;
    height:298px;
    }

a:hover .show{
    opacity:1;
    width:298px;
    height:298px;
}

Upvotes: 1

Related Questions