CODEWITHSUNDEEP
csshtmlhover
Cash
Cash

Reputation: 1

trying to use hover to show a clickable image when the mouse enters

Reading a lot of possible answers, but maybe I'm just not that smart. I would like to do this using CSS and html5 rather than JavaScript if possible, if not then I guess I'll need to go that route.

Here's what I'm trying to do: an image of a machine is displayed on the page inside a div. On hover, I want a clickable highlighted version of the image displayed.

I would also like other informational text and images to become visible using a fadein tag. When the mouse exits the image, I want the highlighted version and additional images and text to be invisible again. There are 10 pieces of equipment I need to do this with. All on the same page.

I am thinking that each piece needs to be in its own div inside the overall div.

<!-- Animation Begins --> 
<div class="animated_lines" style="z-index: 910; margin-left: 0px; margin-top: 150px; opacity: 0.5;"> 

<!-- Vertical Blend Button Start -->    
<div class="productionlines" style="z-index: 920; margin-left: -350px; margin-top: -280px; opacity: 1;"> 
  <img src="images/productionlines/baked/verticalblender.png" /> 
</div> 
<!-- Vertical Blend Button End -->


.productionline { 
  background-image: url(images/productionlines/baked/verticalblender.png); 
} 
.productionline:hover { 
  background-image: url(images/productionlines/baked/verticalblender-highlighted.png); 
}

-Thanks

Upvotes: 0

Views: 5692

Answers (2)

Alex Doe
Alex Doe

Reputation: 934

If i understood correctly you need to change the image using css on hover.

The easiest way is to put in html both images and to work with display:none and display:block;

 .image {
    cursor:pointer;
    position:relative;
    width: 112px;
    height: 112px;
}
.image .hover {
    display:none;
    position: absolute;
    top: 0;
    left: 0;
}
.image:hover .hover {
    display:block;
}
.image:hover .original {
    display:none;
}

    <div class="main">
    <div class="image">
        <img class="original" src="http://upload.wikimedia.org/wikipedia/commons/b/ba/Cute-Ball-Search-icon.png" width="112" height="112" alt="" />
        <img class="hover" src="http://upload.wikimedia.org/wikipedia/commons/c/c0/Perspective-Button-Search-icon.png" width="112" height="112" alt="" />
    </div>
    <div class="image">
        <img class="original" src="http://upload.wikimedia.org/wikipedia/commons/b/ba/Cute-Ball-Search-icon.png" width="112" height="112" alt="" />
        <img class="hover" src="http://upload.wikimedia.org/wikipedia/commons/c/c0/Perspective-Button-Search-icon.png" width="112" height="112" alt="" />
    </div>
</div>

UPDATE: Forgot to specify the width, height and position:relative for the image class. I prepared an example for you: http://jsfiddle.net/wnw1yuw5/1/

Upvotes: 1

Berthy
Berthy

Reputation: 358

I'm not sure to understand exactly what kind of display you want but is that what you're looking for ?

.productionlines { 
    opacity: 0.5;
    display: inline-block;
    cursor: pointer;

    transition: all 0.5s;
} 
.productionlines:hover{ 
    opacity: 1;
}
.productionlines .desc{
    opacity: 0;

    transition: all 0.5s;
}
.productionlines:hover .desc{
    opacity: 1;
}

<!-- HTML --> 
<div class="animated_lines">
    <!-- Vertical Blend Button Start -->    
    <div class="productionlines">
        <a href="http://google.ca">
            <img width="300px" src="http://cdx.dexigner.com/article/16326/Dell_Microsoft_PRODUCT_RED_Branded_Products_01_thumb.jpg" />
            <div class="desc">
                <h3>Your title</h3>
                <p>Some text here...</p>
            </div>
        </a>
    </div>
</div> <!-- Vertical Blend Button End -->

Here's a fiddle: http://jsfiddle.net/xu8ksvay/

Upvotes: 1

Related Questions