CODEWITHSUNDEEP
javascriptjqueryhtmlcss
TwiXSK
TwiXSK

Reputation: 47

Icons displaying divs on hover

I have a few icons that enlarge on hover, they look somewhat like this jsfiddle. I was trying to find a way to make them display a div underneath them, but I failed. I tried using Javascript but my skills are pretty low. Does anybody has a way? This is the CSS I used for the icons,

.icon {
    display: inline-block;
    margin-right: -5;
    z-index: 10;
    position: relative;
}
.icon:hover {
    width: 155px;
    z-index: 100;
    margin: -15px -22px -15px -13px;
}

And the HTML I used for one of them:

<img class="icon" src="http://goolag.eu/wita.png">

Upvotes: 1

Views: 2496

Answers (4)

Adrift
Adrift

Reputation: 59829

You can use :before or :after on the containing link to reveal a hidden element.

If you want to fade the element in with opacity you can use something like: fiddle

a {
    position: relative;
}

a:after {
    content: "Content here"; 
    background: lightgray;
    position: absolute;
    top: 150px; left: 50%; right: 0; bottom: 0;
    height: 5em; width: 5em;
   -webkit-transform: translateX(-50%);
   -o-transform: translateX(-50%);
   -ms-transform: translateX(-50%);
   -moz-transform: translateX(-50%);
    transform: translateX(-50%);  /* used for dynamic horizontal centering */
    opacity: 0;
   -moz-transition: opacity 1s ease;
   -webkit-transition: opacity 1s ease;
    transition: opacity .6s ease;
}

a:hover:after {
    opacity: 1;
}

The only problem with the above is that if you hover over pseudo element itself it'll appear.

One way around this is to combine positioning & opacity: fiddle

a {
    position: relative;
}

a:after {
    content: "Insert content";
    position: absolute;
    top: 0px; left: 50%; right: 0; bottom: 0;
    background: lightgray;
   -webkit-transform: translateX(-50%);
   -ms-transform: translateX(-50%);
   -moz-transform: translateX(-50%);
   -o-transform: translateX(-50%);
    transform: translateX(-50%);
    height: 100px;
    width: 100px;
    opacity: 0;
   -moz-transition: opacity 1s ease, top 1s ease;
   -webkit-transition: opacity 1s ease, top 1s ease;
    transition: opacity 1s ease, top 1s ease;
}

a:hover:after {
    top: 150px; /* slide it down 150px on :hover */
    opacity: 1;
}

Note that if you only had an <img /> (and no wrapping link) this wouldn't work because the behaviour of :before & :after is undefined when used on self-closing elements. Also the pseudo element in both examples will be clickable like the link, so this may or may not work for your use case.

Upvotes: 1

Ben Visness
Ben Visness

Reputation: 5809

With a little bit of restructuring this can be accomplished easily with only CSS.

Put the icon and the <div> to show inside a containing <div> like so:

<div class="icon-container">
    <img class="icon" src="http://goolag.eu/wita.png">
    <div class="show-on-hover"></div>
</div>

And then use the following CSS:

.icon-container img {
    /* Normal image state */
}
.icon-container:hover img {
    /* Enlarged image state */
}
.icon-container .show-on-hover {
    /* Normal background div state */
    display: none;
}
.icon-container:hover .show-on-hover {
    display: block;
}

Notice that you are checking the container <div> for hovering rather than the image itself. This lets you easily apply styles to all the children of the container.

Upvotes: 1

lmove
lmove

Reputation: 317

You may create something like this:

//HTML

<div id="newDiv"> Whatever you want to include </div>


//CSS

#newDiv {
   display: none,
   ...
}


//Javascript with JQuery

$( ".icon" ).hover(function() {
  $( "#newDiv" ).css("display", "block");
});

Upvotes: 0

PBarnum
PBarnum

Reputation: 15

Is this what you're looking for? jsfiddle

jQuery:

$("a").on("mouseenter", function () {
    $("#bg-div").show();
}).on("mouseleave", function () {
    $("#bg-div").hide();
});

Basically saying for any anchor tag, show the div when the mouse enters, and hide the div when the mouse leaves.

This could be even shorter:

$("a").hover(function() { // When hovering
    $("#bg-div").toggle(); // Toggle the element's visibility
});

Upvotes: 0

Related Questions