How to use CSS :hover to make extra div block elements display?


Tags: html,css,html5,css3

Problem :

I have several <div> displayed as boxes that represent a certain company. When they appear on the page, they look like this:

example

When the user hovers over the box, it should display 2 more boxes below that are links to "product info" or "contact info". These boxes can be interracted with and should disappear if the user moves the mouse outside of the main box or 2 boxes that were just shown. See below:

example2

How can I make these "info prompt" divs display on box:hover? Is it possible to create a "CSS rule" of sorts so that when I hover the main box that these will display?

I would really like to do this without JavaScript if possible.

EDIT: When the extra prompts aren't there, the box height should be shortened so there isn't obvious extra white space at the bottom (where they would normally be).

FIDDLE: http://jsfiddle.net/q8csa10v/3/

HTML:

<div class="catalog-display">

            <div class="catalog-item">
                <div class="item-title">&#9825;</div>
                <img class="supplier-logo" src="http://design.ubuntu.com/wp-content/uploads/ubuntu-logo32.png" alt="<supplier name> logo" />
                <div class="supplier-name">Ubuntu Office Supply</div>
                <div class="supplier-info">
                    <span>Product Info</span>
                    <span>Contact Info</span>
                </div>
            </div>

            <div class="catalog-item">
                <div class="item-title">&#9825;</div>
                <img class="supplier-logo" src="http://silvercreekart.weebly.com/uploads/3/7/3/0/37300503/9869404.png" alt="<supplier name> logo" />
                <div class="supplier-name">Silvercreek Products</div>
                <div class="supplier-info">
                    <span>Product Info</span>
                    <span>Contact Info</span>
                </div>
            </div>
</div>

CSS:

.catalog-display {
    padding: 20px 0;
}

.catalog-item {
    width: 150px;
    height: 215px;
    background-color: white;
    text-align: center;
    border: 1px solid #3fa9db;

    display: inline-block;
    vertical-align: middle;

    position: relative;
}

    .catalog-item .item-title {
        background-color: #656262;
        width: 100%;
        height: 25px;
        text-align: right;
    }

    .catalog-item .supplier-logo {
        height: 80px;
        margin: 5px 0;
    }

    .catalog-item .supplier-name {
        color: #0E80B4;
        font-weight: bold;
        cursor: pointer;
        padding: 5px 5px 0 5px;
        border-top: 1px solid #656262;
    }

    .catalog-item .supplier-info {
        color: #656262;
        font-weight: bold;

        bottom: 0;
        position: absolute;

        border-top: 1px solid #656262;
    }

        .catalog-item .supplier-info span {
            display: inline-block;
            height: 46px;
            width: 73px;
            cursor: pointer;
            background-color: transparent;
        }
            .catalog-item .supplier-info span:first-child {
                background-color: #d1e8f0;
            }

            .catalog-item .supplier-info span:last-child {
                background-color: #E5EDD6;
            }


Solution :

Set the initial height of your box to 175px and set on :hover the full height

.catalog-item {
    width: 150px;
    height: 175px;
    background-color: white;
    text-align: center;
    border: 1px solid #3fa9db;
    display: inline-block;
    vertical-align: middle;
    position: relative;
    transition: height .4s;
}
.catalog-item:hover{
    height:215px;
}

CSS for .supplier-info

.catalog-item .supplier-info {
    color: #656262;
    font-weight: bold;
    bottom: 0;
    position: absolute;
    border-top: 1px solid #656262;
    display:none;
}
.catalog-item:hover > div.supplier-info{
    display: block;
}

EDIT For more smoothly effects (with opacity - take a look at this Fiddle)

Fiddle


    CSS Howto..

    How to make textareas auto-resize using just CSS?

    How to set overlay on a page according to page height using CSS

    How to make a progress bar like this in CSS

    How can I hide elements on a HTML page until a user hovers over it using CSS?

    .NET - How to build themes for big CSS files

    CSS show horizontal scroll bars?

    How can I configure this gulpfile the right way to have a nice workflow

    Font-family not showing correctly on my website

    How to create login popup on mouseover on a link using css & or javascript.

    CSS - How to upscale Unicode arrows?

    How to make css menu width impossible to change when zooming or changing resolution?

    jQuery — how to animate a div using height:auto

    how to apply background transparency on a div (for an AJAX loading animation)?

    How to add a style only to certain elements of a list via CSS

    How to align image with hr line with another image html CSS?

    How to create a DIV with vertical scrollable contents and fixed footer which is always visible?

    How to make pixel perfect font in css?

    How can I extend the width of a child div to go beyond the parent div's width?

    xHTML/CSS: How to make inner div get 100% width - margins

    How can I apply percentage-based positioning to background-image sprites with pure CSS?

    How to reject specify HTML tags by using css or xpath selector

    How to create a CSS Animation that is responding to horizontal mouse movement? [closed]

    How to maintain the background image until end of the page

    How to deal with different screen resolutions in CSS?

    jQuery - How to revert css changes when using slideToggle()?

    How to make css opacity property not to be inherited from parent div´s?

    how to make 2 fixed-width sidebar div and 1 flexible-width main div?

    How to insulate HTML widget from external CSS

    How to inherit CSS Menu on each html page linked on Homepage without using any javascript and templates

    How to achieve this view?