CODEWITHSUNDEEP
jqueryhoverjquery-hover
Athax
Athax

Reputation: 182

Add divs on top of an div, when hovering

I'm currently trying to do so when you hover over an element, three divs will overlay the element here's an example of what I want it to do.

Left side is not hovered, the right side is hovered.

enter image description here

I realized that this is not possible to do in css, but I believe this can be done in jQuery, first I tried adding classes but that is not going to work the way i want it to, I'm completely lost when it comes to jQuery.

$(function() { 
$( document ).ready(function() {
    $('.ikon').hover(function() {
        $(this).addClass('hover'); 
    }, function() {
        $(this).removeClass('hover');
    });

Currently css who handles the pictures:

/**PORTFOLIO-ALBUM***/
/*==================*/

#portfolio #album {
    width: 955px;
    min-width: 360p;
    height: 780px;
    overflow: auto;
    position: absolute;
    top: 100px;
    left: 250px;
}

#portfolio .ikon {
    width: 280px;
    height: 175px;
    overflow: hidden;
    float: left;
    margin-left: 20px;
    margin-bottom: 20px;
    position: relative;
}

#portfolio .ikon img {
    max-width: 350px;
    min-height: 100%;
    position: absolute;
    left: -35px;
    top: -10px;

}

How pictures get outputted:

    $query = "SELECT photo_id, photo_filename FROM photos WHERE fk_photo_category_id = '$album_category' ";
    $result = $mysqli->query($query);

    if ($result->num_rows  > 0) {

        while ($row = $result->fetch_array(MYSQLI_ASSOC)) {
        $photo_name = $row['photo_filename'];
        $photo_id = $row['photo_id'];

        echo "<div class='ikon'><a href='index.php?page=portfolio.php&album=$album_id&photo=$photo_id'><img src='img/photos/$photo_name' alt='' /></a></div>";

        }

Upvotes: 0

Views: 2589

Answers (3)

Diogo Ferraz
Diogo Ferraz

Reputation: 44

Take a look at the event .hover() it bind one or two handlers to the matched elements, to be executed when the mouse pointer enters and leaves the elements.'. Link - Jquery.

Seems like this is what you need.

Hope it helps you.

Upvotes: 1

avinash pandey
avinash pandey

Reputation: 1381

You can take advantage of the z index of a div like this.

<div>
    <div class="some_class">
        original div
    <div>
    <div class="hover_class"
        div that shoud appera
    <div>
<div>

Now in Css
#portfolio .iKon {
    z-index:1
 }
#portfolio .iKon:hover {
    z-index: -1; #it will make the original div go in background
}
.hover_class{
    z-index:0;
}

Upvotes: 0

Garrett Stevenson
Garrett Stevenson

Reputation: 136

Here is a pure CSS solution using absolute positioning and z-indexes if CSS isn't completely off the table.

Demo

.initial {
    background-color: red;
    height: 100px;
    position: absolute;
    top: 0;
    left: 0;
    width: 100px;
    z-index: 1;
}

.initial:hover {
    z-index: 0;
}

.hover-div-container {
    height: 100px;
    position: absolute;
    top: 0;
    left: 0;
    width: 100px;
    z-index: 0;
}

.hover-div-container:hover {
    z-index: 2;
}

Upvotes: 1

Related Questions