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 do I refer to an image resource from CSS in grails?

    yui-css grid: how to get a 1/4 - 2/4 - 1/4 grid set up?

    how to stop css/jquery rotation

    how to center text and control user zoom in CSS

    diagonal lines as background for css - how to switch angle

    How to contain text box in parent div

    How to load only html from web pages in selenium

    How to make text appear under div without moving other items in list?

    How specify two css classes: from property and conditional class

    How to set text area to maximum width in bootstrap

    How can I get my divs to process separately?

    How to Make CSS3 Columns Display Properly [closed]

    CSS: How do I centre an element relative to its parent while right-aligning its sibling?

    how to underline a letter of button caption in vaadin?

    How to make a smooth dashed border rotation animation like 'marching ants'

    How to align text in the following way using css / html?

    How to specify a path to be followed while animating an object in HTML using CSS, JQuery

    How do I edit the VIM Omni Completion so that all CSS properties do not end in a colon?

    How to make pure CSS dropdown menu appear with a fade in/slowly

    CSS: How to make a span link to expand?

    How do I make half a hexagon shape using CSS with a border over a rectangle with a border with an image in the middle of the half hexagon

    How can .css('display') be block, [0].hidden be false, and .is(':hidden') be true?

    How to prevent CSS declaration dropped errors cross browser?

    How to remove vertical scrollbar from iframe inside the page

    How to show overflowing text with animation?(Javascript - HTML - CSS)

    How to interchange table cells using Pure CSS

    How to apply CSS page-break to print a table with lots of rows?

    How can I add background color to CSS triangles?

    How to fix bottom of layout of 100% height (jQuery Mobile and Google Map)?

    HTML CSS How to stop a table to put the content after it on a new line?