The pictures below are moving when hovering - html

I started learning web programming and i want to test some features but there is a problem, when I bring the mouse on the above photos, the bottom ones change place like in the photo. The photos below are on the left in the first opening, while hovering on the top one, it shifts to the right.
Like this:
*{
box-sizing: border-box;
}
#gallery{
width: 1200px;
margin: 20px auto;
}
.item-container{
width: 25%;
float: left;
padding: 10px;
}
.gallery-item{
border: 1px solid #ccc;
transition: border 0.4s linear;
}
.gallery-item:hover{
border: 3px solid #777;
cursor: pointer;
}
.gallery-item img{
width: 100%;
height: 200px;
object-fit: contain;
background-color: #DCDCDC;
}
.description{
text-align: center;
padding: 15px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Art Gallery</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="gallery">
<div class="item-container">
<div class="gallery-item">
<a href="img/1.jpg" target="_blank">
<img src="img/1.jpg" alt="" >
</a>
<div class="description">
description about image gallery item
</div>
</div>
</div>
</div>
<div id="gallery">
<div class="item-container">
<div class="gallery-item">
<a href="img/2.jpg" target="_blank">
<img src="img/2.jpg" alt="" >
</a>
<div class="description">
description about image gallery item
</div>
</div>
</div>
</div>
<div id="gallery">
<div class="item-container">
<div class="gallery-item">
<a href="img/3.jpg" target="_blank">
<img src="img/3.jpg" alt="" >
</a>
<div class="description">
description about image gallery item
</div>
</div>
</div>
</div>
<div id="gallery">
<div class="item-container">
<div class="gallery-item">
<a href="img/4.jpg" target="_blank">
<img src="img/4.jpg" alt="" >
</a>
<div class="description">
description about image gallery item
</div>
</div>
</div>
</div>
<div id="gallery">
<div class="item-container">
<div class="gallery-item">
<a href="img/5.jpg" target="_blank">
<img src="img/5.jpg" alt="" >
</a>
<div class="description">
description about image gallery item
</div>
</div>
</div>
</div>
<div id="gallery">
<div class="item-container">
<div class="gallery-item">
<a href="img/6.jpg" target="_blank">
<img src="img/6.jpg" alt="" >
</a>
<div class="description">
description about image gallery item
</div>
</div>
</div>
</div>
</body>
</html>
How can i fix it?


Updated answer
Add outline instant of border
The problem with your border hover css
From
.gallery-item:hover{
border: 3px solid #777;
cursor: pointer;
}
To
.gallery-item:hover{
border: 1px solid #777;
cursor: pointer;
}
*{
box-sizing: border-box;
}
#gallery{
width: 1200px;
margin: 20px auto;
}
.item-container{
width: 25%;
float: left;
padding: 10px;
}
.gallery-item{
outline: 1px solid #ccc;
transition: border 0.4s linear;
}
.gallery-item:hover{
outline: 3px solid #777;
cursor: pointer;
}
.gallery-item img{
width: 100%;
height: 200px;
object-fit: contain;
background-color: #DCDCDC;
}
.description{
text-align: center;
padding: 15px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Art Gallery</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="gallery">
<div class="item-container">
<div class="gallery-item">
<a href="img/1.jpg" target="_blank">
<img src="img/1.jpg" alt="" >
</a>
<div class="description">
description about image gallery item
</div>
</div>
</div>
</div>
<div id="gallery">
<div class="item-container">
<div class="gallery-item">
<a href="img/2.jpg" target="_blank">
<img src="img/2.jpg" alt="" >
</a>
<div class="description">
description about image gallery item
</div>
</div>
</div>
</div>
<div id="gallery">
<div class="item-container">
<div class="gallery-item">
<a href="img/3.jpg" target="_blank">
<img src="img/3.jpg" alt="" >
</a>
<div class="description">
description about image gallery item
</div>
</div>
</div>
</div>
<div id="gallery">
<div class="item-container">
<div class="gallery-item">
<a href="img/4.jpg" target="_blank">
<img src="img/4.jpg" alt="" >
</a>
<div class="description">
description about image gallery item
</div>
</div>
</div>
</div>
<div id="gallery">
<div class="item-container">
<div class="gallery-item">
<a href="img/5.jpg" target="_blank">
<img src="img/5.jpg" alt="" >
</a>
<div class="description">
description about image gallery item
</div>
</div>
</div>
</div>
<div id="gallery">
<div class="item-container">
<div class="gallery-item">
<a href="img/6.jpg" target="_blank">
<img src="img/6.jpg" alt="" >
</a>
<div class="description">
description about image gallery item
</div>
</div>
</div>
</div>

Related

Center Text on multiple images

I need to add centre text on multiple images of different sizes within their own tags in a container div.
This is how my HTML and CSS is setup
<section>
<div class="row ">
<div class="col ">
<div class="container gallery">
<img class="sports" src="img/block1Sports.jpg">
<h3 class="text1" >Sports</h3>
<img id="wellness" src="img/block2Wellness.jpg">
<h3 class="text1" >wellness</h3>
<img id="expeditions" src="img/block3Expeditions.jpg">
<h3 class="text1" >expeditions</h3>
<img id="games" src="img/block4Games.jpg">
<h3 class="text1" >games</h3>
<img id="culture" src="img/block5Culture.jpg">
<h3 class="text1" >culture</h3>
<img id="beauty" src="img/block6Beauty.jpg">
<h3 class="text1" >beauty</h3>
<img id="travelling" src="img/block7Travelling.jpg">
<h3 class="text1" >travelling</h3>
</div>
</div>
</div>
</section>
All these images have a single text messages which should all be centred, appreciate your help.
Here is a snap example of desired output

Instead of <img>, put your image in a div container using css background-image:url('');. Then use display:flex; (https://css-tricks.com/snippets/css/a-guide-to-flexbox/) on this div to position your text vertically and horizontally centered.
HTML
<section>
<div class="row ">
<div class="col ">
<div class="container gallery">
<div class="imageWithCenteredText sports">
<h3 class="text1" >Sports</h3>
</div>
</div>
</div>
...
</div>
</section>
CSS
.imageWithCenteredText {
display:flex;
justify-content: center;
align-items: center;
}
.sports {
background-image: url('img/block1Sports.jpg');
width: 500px; /* PICTURE WIDTH */
height: 500px; /* PICTURE HEIGHT */
}

<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<style>
.gallery-item {
position: relative;
}
.gallery-item img {
width: 100%;
}
.gallery-item h3 {
position: absolute;
top: 50%;
left: 50%;
}
</style>
</head>
<body>
<section>
<div class="row ">
<div class="col ">
<div class="container gallery">
<div class="gallery-item">
<img class="sports" src="img/block1Sports.jpg">
<h3 class="text1" >Sports</h3>
</div>
<div class="gallery-item">
<img id="wellness" src="img/block2Wellness.jpg">
<h3 class="text1" >wellness</h3>
</div>
<div class="gallery-item">
<img id="expeditions" src="img/block3Expeditions.jpg">
<h3 class="text1" >expeditions</h3>
</div>
<div class="gallery-item">
<img id="games" src="img/block4Games.jpg">
<h3 class="text1" >games</h3>
</div>
<div class="gallery-item">
<img id="culture" src="img/block5Culture.jpg">
<h3 class="text1" >culture</h3>
</div>
<div class="gallery-item">
<img id="beauty" src="img/block6Beauty.jpg">
<h3 class="text1" >beauty</h3>
</div>
<div class="gallery-item">
<img id="travelling" src="img/block7Travelling.jpg">
<h3 class="text1" >travelling</h3>
</div>
</div>
</div>
</div>
</section>
</body>
</html>

Align movement direction elements(previous/next) before/after a relative positioned element (no flexbox)

I'm working on multi-item carousel, and I need to align 2 elements, previous,next - before,after a container that is in position relative;
I need:
Previous to be vertical align in the middle before items
Next to be vertical align in the middle after items
for Next,Previous I want to use in the end an icon font
items using javascript will be moved left-right, so he needs to be relative positioned
I tried to use display:inline-block on items, but doesn't work as expected;
! Can be used floats instead of display: inline-block for class item-container.
I can't use flexbox, because I need to support older browsers.
.carousel {
width: 500px;
overflow: hidden;
position: relative;
white-space: nowrap;
}
.c-carousel__previous,
.c-carousel__next {
display: inline-block;
}
.items {
top: 0px;
left: 0;
position: relative;
display: inline-block;
}
.item-container {
width: 16.66667%;
display: inline-block;
}
<div class="carousel">
<div class="previous">
previous
</div>
<div class="items">
<div class="item-container">
<a href="">
<img src="http://via.placeholder.com/50x50">
</a>
</div>
<div class="item-container">
<a href="">
<img src="http://via.placeholder.com/50x50">
</a>
</div>
<div class="item-container">
<a href="">
<img src="http://via.placeholder.com/50x50">
</a>
</div>
<div class="item-container">
<a href="">
<img src="http://via.placeholder.com/50x50">
</a>
</div>
<div class="item-container">
<a href="">
<img src="http://via.placeholder.com/50x50">
</a>
</div>
<div class="item-container">
<a href="">
<img src="http://via.placeholder.com/50x50">
</a>
</div>
<div class="item-container">
<a href="">
<img src="http://via.placeholder.com/50x50">
</a>
</div>
<div class="item-container">
<a href="">
<img src="http://via.placeholder.com/50x50">
</a>
</div>
<div class="item-container">
<a href="">
<img src="http://via.placeholder.com/50x50">
</a>
</div>
</div>
<div class="next">
next
</div>
</div>

Try this
.carousel {
width: 500px;
overflow: hidden;
position: relative;
white-space: nowrap;
}
.previous,
.next {
display: inline-block;
vertical-align: middle;
width: 25px;
}
.items {
top: 0px;
left: 0;
position: relative;
display: inline-block;
vertical-align: middle;
width: 450px;
overflow: hidden;
}
.item-container {
width: 16.66667%;
display: inline-block;
}
<div class="carousel">
<div class="previous">
previous
</div>
<div class="items">
<div class="item-container">
<a href="">
<img src="http://via.placeholder.com/50x50">
</a>
</div>
<div class="item-container">
<a href="">
<img src="http://via.placeholder.com/50x50">
</a>
</div>
<div class="item-container">
<a href="">
<img src="http://via.placeholder.com/50x50">
</a>
</div>
<div class="item-container">
<a href="">
<img src="http://via.placeholder.com/50x50">
</a>
</div>
<div class="item-container">
<a href="">
<img src="http://via.placeholder.com/50x50">
</a>
</div>
<div class="item-container">
<a href="">
<img src="http://via.placeholder.com/50x50">
</a>
</div>
<div class="item-container">
<a href="">
<img src="http://via.placeholder.com/50x50">
</a>
</div>
<div class="item-container">
<a href="">
<img src="http://via.placeholder.com/50x50">
</a>
</div>
<div class="item-container">
<a href="">
<img src="http://via.placeholder.com/50x50">
</a>
</div>
</div>
<div class="next">
next
</div>
</div>
and please adjust the width accordingly.

Try vertical-align: middle in .items container with overflow: hidden
body {
margin: 0;
}
.carousel {
width: 500px;
overflow: hidden;
position: relative;
white-space: nowrap;
}
.previous,
.next {
display: inline-block;
}
.items {
display: inline-block;
vertical-align: middle;
overflow: hidden;
}
.item-container {
width: 16.66667%;
margin: 0 5px;
display: inline-block;
}
<div class="carousel">
<div class="previous">previous</div>
<div class="items">
<div class="item-container">
<a href="">
<img src="http://via.placeholder.com/50x50">
</a>
</div>
<div class="item-container">
<a href="">
<img src="http://via.placeholder.com/50x50">
</a>
</div>
<div class="item-container">
<a href="">
<img src="http://via.placeholder.com/50x50">
</a>
</div>
<div class="item-container">
<a href="">
<img src="http://via.placeholder.com/50x50">
</a>
</div>
<div class="item-container">
<a href="">
<img src="http://via.placeholder.com/50x50">
</a>
</div>
<div class="item-container">
<a href="">
<img src="http://via.placeholder.com/50x50">
</a>
</div>
</div>
<div class="next">next</div>
</div>

Use display: inline-block on correct classes and give width to item.
Hope this would work:
.carousel {
width: 500px;
overflow: hidden;
position: relative;
white-space: nowrap;
}
.previous,
.next {
display: inline-block;
width: 50px;
vertical-align: top;
}
.items {
top: 0px;
left: 0;
position: relative;
display: inline-block;
width: calc(500px - 100px);
overflow: hidden;
}
.item-container {
width: 16.66667%;
display: inline-block;
}
<div class="carousel">
<div class="previous">
previous
</div>
<div class="items">
<div class="item-container">
<a href="">
<img src="http://via.placeholder.com/50x50">
</a>
</div>
<div class="item-container">
<a href="">
<img src="http://via.placeholder.com/50x50">
</a>
</div>
<div class="item-container">
<a href="">
<img src="http://via.placeholder.com/50x50">
</a>
</div>
<div class="item-container">
<a href="">
<img src="http://via.placeholder.com/50x50">
</a>
</div>
<div class="item-container">
<a href="">
<img src="http://via.placeholder.com/50x50">
</a>
</div>
<div class="item-container">
<a href="">
<img src="http://via.placeholder.com/50x50">
</a>
</div>
<div class="item-container">
<a href="">
<img src="http://via.placeholder.com/50x50">
</a>
</div>
<div class="item-container">
<a href="">
<img src="http://via.placeholder.com/50x50">
</a>
</div>
<div class="item-container">
<a href="">
<img src="http://via.placeholder.com/50x50">
</a>
</div>
</div>
<div class="next">
next
</div>
</div>

The above answers are good, if all the elements are static, but I mentioned that
'items using javascript will be moved left-right, so it needs to be
relative positioned';
This movement of the 'items' class created multiple issues, in all the above cases(like 'hiding' next/previous, overflow hidding content that should be vissible;
So, the solution I found:
remove overflow: hidden from carousel
add a new container for items, items-container and use overflow: hidden on this one
position next,previous absolute

Flipping image grid with different pictures

I am creating a responsive image grid. Currently, there is the same picture in each box but I would like to create a mask so that that image is shown throughout all of the boxes, not repeated in each. Kind of like this: http://ptgmedia.pearsoncmg.com/images/chap3_032133065x/elementLinks/082fig02.jpg
I also would like to create a flipping effect on each box where when it flips over, it would show a completely different picture, just in that one box.
Thanks in advance for your help if applicable.
div.grid {
font-size: 0;
width: 95%;
margin: 30px auto;
font-family: sans-serif;
}
a.grid {
font-size: 16px;
overflow: hidden;
display: inline-block;
margin-bottom: 8px;
width: calc(50% - 4px);
margin-right: 8px;
clip:
}
a.grid:nth-of-type(2n) {
margin-right: 0;
}
#media screen and (min-width: 50em) {
a.grid {
width: calc(25% - 6px);
}
a.grid:nth-of-type(2n) {
margin-right: 8px;
}
a.grid:nth-of-type(4n) {
margin-right: 0;
}
}
a.grid:hover img {
}
figure {
margin: 0;
}
img.grid {
border: none;
max-width: 100%;
height: auto;
display: block;
background: #ccc;
transition: transform .2s ease-in-out;
}
.p a {
display: inline;
font-size: 13px;
margin: 0;
}
.p {
text-align: center;
font-size: 13px;
padding-top: 100px;
}
<div class="grid">
<a class="grid" href="#">
<figure>
<img class="grid" src="https://static.pexels.com/photos/7613/pexels-photo.jpg" alt="">
</figure>
</a>
<a class="grid" href="#">
<figure>
<img class="grid" src="https://static.pexels.com/photos/7613/pexels-photo.jpg" alt="">
</figure>
</a>
<a class="grid" href="#">
<figure>
<img class="grid" src="https://static.pexels.com/photos/7613/pexels-photo.jpg" alt="">
</figure>
</a>
<a class="grid" href="#">
<figure>
<img class="grid" src="https://static.pexels.com/photos/7613/pexels-photo.jpg" alt="">
</figure>
</a>
<a class="grid" href="#">
<figure>
<img class="grid" src="https://static.pexels.com/photos/7613/pexels-photo.jpg" alt="">
</figure>
</a>
<a class="grid" href="#">
<figure>
<img class="grid" src="https://static.pexels.com/photos/7613/pexels-photo.jpg" alt="">
</figure>
</a>
<a class="grid" href="#">
<figure>
<img class="grid" src="https://static.pexels.com/photos/7613/pexels-photo.jpg" alt="">
</figure>
</a>
<a class="grid" href="#">
<figure>
<img class="grid" src="https://static.pexels.com/photos/7613/pexels-photo.jpg" alt="">
</figure>
</a>
<a class="grid" href="#">
<figure>
<img class="grid" src="https://static.pexels.com/photos/7613/pexels-photo.jpg" alt="">
</figure>
</a>
<a class="grid" href="#">
<figure>
<img class="grid" src="https://static.pexels.com/photos/7613/pexels-photo.jpg" alt="">
</figure>
</a>
<a class="grid" href="#">
<figure>
<img class="grid" src="https://static.pexels.com/photos/7613/pexels-photo.jpg" alt="">
</figure>
</a>
<a class="grid" href="#">
<figure>
<img class="grid" src="https://static.pexels.com/photos/7613/pexels-photo.jpg" alt="">
</figure>
</a>
</div>

If I got you right, you're trying to do something like this:
EDIT: Fixed the buggy hover and that the items remain squares.
html, body{
width:100%;
height:100%;
box-sizing:border-box;
margin:0;
padding:0;
}
.grid{
width:calc(60vw + 30px);
display:inline-block;
position:fixed;
background-color:lightgray;
perspective:1000px;
}
.griditem{
display:block;
width:20vw;
margin:5px;
height:20vw;
float:left;
}
.front{
width:100%;
height:100%;
background:#fff url('http://www.popsci.com/sites/popsci.com/files/styles/large_1x_/public/import/2013/images/2013/03/bluemarble_1.jpg?itok=-IIyWZZX') no-repeat;
background-attachment:fixed;
background-position: top left;
background-size:cover;
transform:rotateY(0deg);
transition:.4s ease-in-out;
cursor:pointer;
}
.back{
width:100%;
height:100%;
transform:rotateY(180deg);
background:#fff url('http://www.dentoncorkermarshall.com/wp-content/uploads/2013/12/Asia-Square-06.jpg?x92178') no-repeat;
background-size:cover;
backface-visibility:hidden;
transition:.4s ease-in-out;
position:absolute;
top:0;
z-index:2;
}
.griditem:hover .front{
transform:rotateY(180deg);
transition:.4s ease-in-out;
}
.griditem:hover .back{
transform:rotateY(0deg);
transition:.4s ease-in-out;
}
<div class="grid">
<div class="griditem">
<div class="front">
<div class="back"></div>
</div>
</div>
<div class="griditem">
<div class="front">
<div class="back"></div>
</div>
</div>
<div class="griditem">
<div class="front">
<div class="back"></div>
</div>
</div>
<div class="griditem">
<div class="front">
<div class="back"></div>
</div>
</div>
<div class="griditem">
<div class="front">
<div class="back"></div>
</div>
</div>
<div class="griditem">
<div class="front">
<div class="back"></div>
</div>
</div>
<div class="griditem">
<div class="front">
<div class="back"></div>
</div>
</div>
<div class="griditem">
<div class="front">
<div class="back"></div>
</div>
</div>
<div class="griditem">
<div class="front">
<div class="back"></div>
</div>
</div>
</div>

Overlay with words across multiple images

I am making a instagram type of feed and have a 4 images with a further 4 below those 4. I need to make a overlay which I can put words in front of all 8 images showing instagram followers and a link to their instagram.
I have most of it done but the overlay I cannot seem to get it to work. Any help would be appreciated, thanks in advance.
Josh
<ul class="images">
<div class="col-sm-3">
<img src="img/instagram/image-1.jpg" alt="Image Gallery" class="img-responsive">
</div>
<div class="col-sm-3">
<img src="img/instagram/image-2.jpg" alt="Image Gallery" class="img-responsive">
</div>
</ul>

Use o overlay div with position absolute covering the entire images container like the example....
.images{
position:relative;
display:inline-block;
}
.overlay{
position: absolute;
top: 0;
left: 0;
background: rgba(255,255,255,0.5);
width: 100%;
height: 100%;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
visibility: hidden;
}
.images:hover .overlay{
visibility: visible;
}
<div class="images">
<div class="col-sm-3">
<img src="http://via.placeholder.com/350x150" alt="Image Gallery" class="img-responsive">
</div>
<div class="col-sm-3">
<img src="http://via.placeholder.com/350x150" alt="Image Gallery" class="img-responsive">
</div>
<div class='overlay'>
<span>some text</span>
</div>
</div>

Like this? You can put whatever words in the overlay as you want. I used xs columns so you could see it fully.
.overlay{
display:block;
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
background-color:rgba(0,0,0,.5);
z-index:10;
}
.overlay h2{
color:#fff;
}
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="overlay">
<h2>Follow me on Insta</h2>
</div>
<div class="row images">
<div class="col-xs-3">
<img src="http://fillmurray.com/200/300" alt="Image Gallery" class="img-responsive">
</div>
<div class="col-xs-3">
<img src="http://fillmurray.com/200/300" alt="Image Gallery" class="img-responsive">
</div>
<div class="col-xs-3">
<img src="http://fillmurray.com/200/300" alt="Image Gallery" class="img-responsive">
</div>
<div class="col-xs-3">
<img src="http://fillmurray.com/200/300" alt="Image Gallery" class="img-responsive">
</div>
</div>
</div>

I think the below is what you need. I used flexboxes for layout.
* {
box-sizing: border-box;
}
.container {
display: flex;
justify-content: flex-start;
flex-flow: wrap;
width: 500px;
}
.item {
display: inline-block;
margin: 0 0.5em 0.5em 0;
position: relative;
}
.text {
opacity: 0;
background-color: rgba(0, 0, 0, 0.6);
position: absolute;
display: flex;
align-items: center;
justify-content: center;
width: 100px;
height: 100px;
top: 0;
}
.text:hover {
border: thin solid red;
animation: opac 0.3s ease forwards;
}
#keyframes opac {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="row-sm-12 container">
<div class="row-sm-3 item">
<img src="http://placehold.it/100">
<div class="text">Bla bla</div>
</div>
<div class="row-sm-3 item">
<img src="http://placehold.it/100">
<div class="text">Bla bla</div>
</div>
<div class="row-sm-3 item">
<img src="http://placehold.it/100">
<div class="text">Bla bla</div>
</div>
<div class="row-sm-3 item">
<img src="http://placehold.it/100">
<div class="text">Bla bla</div>
</div>
<div class="row-sm-3 item">
<img src="http://placehold.it/100">
<div class="text">Bla bla</div>
</div>
<div class="row-sm-3 item">
<img src="http://placehold.it/100">
<div class="text">Bla bla</div>
</div>
<div class="row-sm-3 item">
<img src="http://placehold.it/100">
<div class="text">Bla bla</div>
</div>
<div class="row-sm-3 item">
<img src="http://placehold.it/100">
<div class="text">Bla bla</div>
</div>
</div>

CSS Images float left error

I am a UI Designer. I want each image float to the left one beneath another. But its appearing like. http://delhiwebdesigner.com/images/Capture.png Please check where the problem is. Below is my HTML and CSS Codes:
<div class="books-container">
<article class="entry">
<img src="images/books/1.jpg" alt="" title="" />
<a href="#">
<div class="text">
<p class="head">LeMans</p>
<p class="title">LeMans</p>
</div>
</a>
</article>
<article class="entry">
<img src="images/books/2.jpg" alt="" title="" />
<a href="#">
<div class="text">
<p class="head">LeMans</p>
<p class="title">LeMans</p>
</div>
</a>
</article>
<article class="entry">
<img src="images/books/4.jpg" alt="" title="" />
<a href="#">
<div class="text">
<p class="head">LeMans</p>
<p class="title">LeMans</p>
</div>
</a>
</article>
<article class="entry">
<img src="images/books/3.jpg" alt="" title="" />
<a href="#">
<div class="text">
<p class="head">LeMans</p>
<p class="title">LeMans</p>
</div>
</a>
</article>
<article class="entry">
<img src="images/books/5.jpg" alt="" title="" />
<a href="#">
<div class="text">
<p class="head">LeMans</p>
<p class="title">LeMans</p>
</div>
</a>
</article>
<article class="entry">
<img src="images/books/6.jpg" alt="" title="" />
<a href="#">
<div class="text">
<p class="head">LeMans</p>
<p class="title">LeMans</p>
</div>
</a>
</article>
<article class="entry">
<img src="images/books/7.jpg" alt="" title="" />
<a href="#">
<div class="text">
<p class="head">LeMans</p>
<p class="title">LeMans</p>
</div>
</a>
</article>
<article class="entry">
<img src="images/books/8.jpg" alt="" title="" />
<a href="#">
<div class="text">
<p class="head">LeMans</p>
<p class="title">LeMans</p>
</div>
</a>
</article>
<article class="entry">
<img src="images/books/9.jpg" alt="" title="" />
<a href="#">
<div class="text">
<p class="head">LeMans</p>
<p class="title">LeMans</p>
</div>
</a>
</article>
<article class="entry">
<img src="images/books/10.jpg" alt="" title="" />
<a href="#">
<div class="text">
<p class="head">LeMans</p>
<p class="title">LeMans</p>
</div>
</a>
</article>
<article class="entry">
<img src="images/books/11.jpg" alt="" title="" />
<a href="#">
<div class="text">
<p class="head">LeMans</p>
<p class="title">LeMans</p>
</div>
</a>
</article>
<article class="entry">
<img src="images/books/12.jpg" alt="" title="" />
<a href="#">
<div class="text">
<p class="head">LeMans</p>
<p class="title">LeMans</p>
</div>
</a>
</article>
<article class="entry">
<img src="images/books/13.jpg" alt="" title="" />
<a href="#">
<div class="text">
<p class="head">LeMans</p>
<p class="title">LeMans</p>
</div>
</a>
</article>
<div class="clear"></div>
CSS code as folowed:-
.books-container {
width: 1200px;
margin: 100px auto 0;
}
.entry {
width: 25%;
float: left;
height: auto;
padding: 10px;
position: relative;
}
.entry img {
width: 100%;
display: block;
}
.entry .text {
position: absolute;
display: none;
top: 0;
vertical-align: middle;
height: 100%;
background: red;
opacity: 0.5;
text-align: center;
width: 100%;
padding: 10px;
}

http://jsfiddle.net/6deqxyk4/4/
.books-container {max-width: 1200px;width:100%; margin: 100px auto 0;}
.entry {width:400px; float: left; height: auto; padding: 10px; position: relative;}
.entry img {width: 100%; display: block;}
.entry .text {position: absolute; display: none; top: 0; vertical-align: middle; height: 100%; background: red; opacity: 0.5; text-align: center; width: 100%; padding: 10px;}