CODEWITHSUNDEEP
htmlcss
confused-perspective
confused-perspective

Reputation: 107

Creating a image-to-text effect on hover

I want to create a rollover effect like THIS

As of now, my code is this -

<ul>
<li> <a href="#" class="linkWrapper">
   <span class="text">
   <font size = "+3" face="Arial">Hello</font>
   </span>
   <img src="images/icons/64x64/alert.png" class = "hoverEff"/>
   </a>

</li>

The CSS is 

    .hoverEff:hover
    {
        opacity: 0.05;
        transition: 0.5s;
    }

    .linkWrapper {
        position: relative;
        padding: 0;
        width:35%;
        display:block;
    }

    .text {
        position: absolute;
        top: 0;
        color:#f00;
        background-color:rgba(255,255,255,1);
        width: 95%;
        height: 99%;
        line-height:100px;
        text-align: center;
        z-index: 10;
        opacity: 0;
        -webkit-transition: all 0.5s ease;
        -moz-transition: all 0.5s ease;
        -o-transition: all 0.5s ease;
        transition: all 0.5s ease;
    }
    .text:hover {
        opacity:1;
    }

It's not been particularly helpful! The result is just a shabby box that covers the image but will absolutely FAIL when the background will be something other than white. As I've got to submit this test website to my professor, I want the most efficient method!

What my problem is - the website I mentioned 'scrolls-akgec.com' has a different texture background yet manages to do the same without using the method I tried. How?

Upvotes: 0

Views: 65

Answers (2)

denny7550
denny7550

Reputation: 13

If you want the same effect I think your problem will be gone with two button images that have the same width and height.

Example:

In HTML :

<div id="button">
   <img  src="image.png" />
   <img class="over" src="image2.png" />
</div>

In CSS : 

#button{
 position:relative;
 height:100px;
 width:100px;
}

#button img {
 position:absolute;
 left:0;
 transition: opacity 0.5s ease-in-out;
}

 #button img.over:hover {
 opacity:0;
}

The text is image.png. Hope it helps.

Upvotes: 0

Alessandro Incarnati
Alessandro Incarnati

Reputation: 7248

You can use the browser inspector to understand which CSS technique has been used to create this visual effect of image to text transition.

In this case you can see that two background images have been used and they change on :hover on the a link tag.

Also you can notice in order to make the 'About' text of the a link disappear text-indent:-9999px; has been used.

Just created a demo: http://jsfiddle.net/a_incarnati/trq9Lu2d/

.about a{width:200px;height:200px;background-color:grey; display:block;text-indent:-9999px;}

.about a:hover {
background: url("http://scrolls-akgec.com/img/rulesh.png") no-repeat;
}

.about a {
background: url("http://scrolls-akgec.com/img/rules.png") no-repeat;
-webkit-transition: linear .3s;
-moz-transition: linear .3s;
-o-transition: linear .3s;
-ms-transition: linear .3s;
transition: linear .3s;
}

In case you want to do it with img tags then you need to use JS to change the img source.

Upvotes: 1

Related Questions