HTML/CSS Boxes

Hi all,

I've learnt a few things about creating boxes with list items.

However, I am stuck. I can't seem to replicate these boxes properly.

I have created the image, the text box and the horizontal line with :after selector.

I have hidden the content with display: none that is meant to be displayed when user hovers over the image.

http://portfoliotheme.org/themes/?theme=Invent

<div id="programmes">
                    <ul>
                        <li>
                            <div class="image">
                                <img src="img/juniorcollege-thumb.jpg" alt="corporate">
                                <span>Corporate</span>
                            <div class="image-info">
                                <h4>Corporate & Working Adults</h4>                      
                            </div>
                            </div>
                            <div class="text-area">
                                <h3>Corporate & Working Adults</h3>
                                <p>We believe in the power of professional training</p>
                            </div>
                            </li><li>
                            <div class="image">
                                <img src="img/juniorcollege-thumb.jpg" alt="undergraduates">
                                <span>Undergraduates</span>
                            <div class="image-info">
                                <h4>Undergraduates</h4>                      
                            </div>
                            </div>
                            <div class="text-area">
                                <h3>Undergraduates</h3>
                                <p>We believe in the power of professional training</p>
                            </div></li><li>
                            <div class="image">
                                <img src="img/secondary-thumb.jpg" alt="secondary">
                                <span>JC/Poly</span>
                            <div class="image-info">
                                <h4>JC/Poly</h4>                      
                            </div>
                            </div>
                            <div class="text-area">
                                <h3>JC/Poly</h3>
                                <p>We believe in the power of professional training</p>
                            </div></li><li>
                            <div class="image">
                                <img src="img/primary-thumb.jpg" alt="corporate">
                                <span>Secondary</span>
                            <div class="image-info">
                                <h4>Secondary & Primary</h4>                      
                            </div>
                            </div>
                            <div class="text-area">
                                <h3>Secondary & Primary</h3>
                                <p>We believe in the power of professional training</p>
                            </div></li>
                </div>
          
            </div>

Code (markup):

#programmes {
    width: 80%;
    margin: auto;
}

#programmes  ul {
    list-style: none;
    overflow:hidden;
    zoom:1;
}

#programmes li {
    position: relative;
    float: left;
    text-align: center;
    overflow: hidden;
    width: 25%;
    height: 25em;
}

#programmes img {
    display:block;
    max-width: 100%;
    max-height: auto;
    width: 300px;
    height: 200px;
    overflow: hidden;
    margin: auto;
}

.image span {
    position: absolute;
    top: 180px;
    right: 90px;
    width: 40%;
    padding: 5px;
    background: red;
    color: #fff;
    line-height: 1.2em;
}

.text-area {
    width: 300px;
    margin: auto;
    height: 10em;
    overflow: hidden;
    color: grey;
    background: #fff;
}

.text-area h3 {
    padding: 20px 0 20px 0;
    font-size: 1.2em;
}

.text-area h3:after {
    display: block;
    padding: 5px 0 5px 0;
    width: 80%;
    content: "";
    margin: auto;
    border-bottom: 1px solid #cccccc;
}

.image-info {
    display: none;
}

#canvas #main-headline .text-area p {
    font-size: 1.2em;
    color: grey;
    text-align: center;
}

Code (markup):

I am not sure how to bring up the hover effects when user hovers over image.

Would appreciate some pointers. Thanks!

 

Hi serialentre.

In fact, the effect is not triggered by the display:none property-value to the selectors, but implementing a combination of opacity and a css transition.

opacity: 0;
transition: opacity 0.4s ease-in-out 0s

to

opacity: 1

Plus another piece of code for the background-image effect.