styling figure & figcaption

Question

I am wondering if and how I can achieve the following look in css/html with the current html/css i already have :

I want to get the first(red) one : https://i.stack.imgur.com/tcnVx.jpg

-I have the second(blue)/third(green) working -I would like the img(purple F) to span the whole width of the section, also have a certain height (80% of section height). have the image fill this space like in the image

-I want the img to be clickable (to open a lightbox)

-The figcaption has text, should be 20%(this adds up to 100% total) height of section and centered (probably with line-height this i can manage haha..)

My code so far :

<section>
<article class="graphic">
    <figure>
        <img src="img/Graphic/final.png" alt="Image for graphic work">
        <figcaption>Final logo</figcaption>
    </figure>
</article>

<article class="web">
    <figure>
        <img src="img/Web/obbycmsmockup.png" alt="Image for web work">
        <figcaption>CMS webdesign for OBBYCMS</figcaption>
    </figure>
</article>  

<article class="misc">
    <figure>
        <img src="img/Misc/ww4.jpg" alt="Image for other work">
        <figcaption>Graphic work for WhiteWizard</figcaption>
    </figure>
</article>

Answer 1

I think this is what you want to achieve. Styling the figures, images and the figcaptions.

*{
    box-sizing:border-box;
}
article {
    width:200px;
    height:200px;
    float:left;
    margin:10px;
    color:#FFF;
}
.web {
    background:green
}
.misc {
    background:blue
}
.graphic figure{
    width:100%;
    height:100%;
    margin:0;
    background:#FFF;
}
.graphic figcaption{
    background:#F00;
    color:#FFF;
    width:100%;
    height:20%;
    text-align:center;
    padding:5px;
}
.graphic img {
    width:100%;
    height:80%;
}
.web img, .misc img {
    background:#FFF;
    width:100%;
    height:40%;
}

<article class="graphic">
    <figure>
        <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/c/c9/Intel-logo.svg/2000px-Intel-logo.svg.png" alt="Image for graphic work">
        <figcaption>Final logo</figcaption>
    </figure>
</article>
<article class="web">
    <figure>
        <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/c/c9/Intel-logo.svg/2000px-Intel-logo.svg.png" alt="Image for web work">
        <figcaption>CMS webdesign for OBBYCMS</figcaption>
    </figure>
</article>
<article class="misc">
    <figure>
        <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/c/c9/Intel-logo.svg/2000px-Intel-logo.svg.png" alt="Image for other work">
        <figcaption>Graphic work for WhiteWizard</figcaption>
    </figure>
</article>

If you need something else, comment. If it helps, +1.

Answer 2

• For structure

Above code of Vann'Tile lanito is fine. Just need to put all element in parent container

eg: <div class="container"><--all element inside this--></div>

CSS:

**.container{
width: 100%;
background: grey
}**

• For Light box

To make img clickable (to open a lightbox). You must use jQuery to do it. You ca use plugin for lightbox such:-

Fancybox

lightbox2 etc.

If you are looking for responsive light box:

Lightbox/Responsive

Dimsemenov plugins etc.