How to trigger one element inside a div on mouse hover in CSS


Tags: html,css,image,css3

Problem :

I have a square image of 220px by 220px (myimage.jpg). In the right corner of the image, I have a grey triangle created using CSS (triangle-topright) and on top of that, a small png icon (my_icon.png). I am looking to get a transition 0.5sec from grey(#c3c2c0) to blue (#014792) of the triangle (and only the triangle) using CSS triggered when the user puts his mouse pointer over ANY portion of the 220px by 220px image. Is there any way to accomplish that using strictly CSS?

Here's my code:

<div class="category-image">
    <i class="triangle-topright"><i></i></i>
    <img src="my_icon.png" class="icon-png-over"/>
    <img src="my_image.jpg"/>
</div>

CSS

.category-image {
    position: relative;
}

.icon-png-over {
    position: absolute;
    top: 10;
    left: 190;
}

.triangle-topright {
    position: relative;
}

.triangle-topright > i {
    position: absolute;
    width: 0;
    height: 0;
    line-height: 0;
    border: 32px solid transparent;
    border-right: 32px solid #c3c2c0;
    border-top: 32px solid #c3c2c0;
    left: 156;
    top: 14;
}


Solution :

Assuming .category-image is the same size as the image, you can use:

.category-image:hover .triangle-topright > i {
    border-right: 32px solid #014792;
    border-top: 32px solid #014792;
}

Then for the transition, just add the properties to the i element: (Vendor prefixes omitted for brevity.)

.triangle-topright > i {
    transition: border 0.5s linear;
}

You might also need to change the display of .category-image to inline-block in order to shrink to fit the image's dimensions.

Example Here


    CSS Howto..

    How to delete only the selected message inside a #Chat using jquery?

    How can I make a button-link, as Like in Facebook?

    How to use fadeIn with css property change jquery

    How to render CSS and HTML elements back to the Client's Browser from Form-POST acction and JavaScript?

    How to create Text Overlays in CSS?

    How to convert SVG CSS animation to pure JS code

    Show text-decoration when hover over div

    jQuery to hide and show divs with an indicator

    How To Adjust CSS List On Hover Image

    How to properly align icon and text in a table?

    How to avoid overlapping HTML tags to highlight text

    jQuery .animate() sets display:none, how to avoid?

    How to set a default location of a scrollbar

    Learning CSS, how to use stylesheet with master page

    AJAX Call returns JSON, how to render properly formatted data

    How to get element to fill 100% height of parent

    How to change color and background of whole web site

    How can I create this shape in CSS? [closed]

    How to merge css in wordpress

    How to vertically align numbers of ol?

    How to bind click event on image added using CSS 'background-image' property in jQuery

    How can I use an alert or form input to allow a user to set a value of a CSS parameter [closed]

    How to remove border from appearing around the image?

    how to make a div toggle background-position “onclick” while keeping hover

    How to adapt CSS image container to different browser sizes

    How to create and edit a css file in browser Dom by javascript and then download it?

    How do you position CSS elements directly under each other?

    How to change css content hover effect background color css php in this situation?

    How to specify a CSS border on hover around thumbnails?

    How to add CSS stylesheet to aspx.vb table