These images are using a CSS code for hovering effects, everything works good except i have no idea how to re arrange their position on the page.
Right now they are horizontally on top of each other, how can i make them side by side?:
body {
color:#000000;
background-color:#000000;
background-image:url('Background Image');
background-repeat:no-repeat;
}
a { color:#0000FF; }
a:visited { color:#800080; }
a:hover { color:#008000; }
a:active { color:#FF0000; }
#cf {
position:relative;
height:281px;
width:450px;
margin:0 auto;
}
#cf img {
position:absolute;
left:0;
-webkit-transition: opacity 200ms ease-in-out;
-moz-transition: opacity 200ms ease-in-out;
-o-transition: opacity 200ms ease-in-out;
transition: opacity 200ms ease-in-out;
}
#cf img.top:hover {
opacity:0;
}
<a href="http://example.com/page1">
<div id="cf">
<img class="bottom" src="images/img_a_1.jpg" />
<img class="top" src="images/img_a_2.jpg" />
</div></a>
<a href="http://example.com/page2">
<div id="cf">
<img class="bottom" src="images/img_b_1.jpg" />
<img class="top" src="images/img_b_2.jpg" />
</div></a>
<a href="http://example.com/page3">
<div id="cf">
<img class="bottom" src="images/img_c_1.jpg" />
<img class="top" src="images/img_c_2.jpg" />
</div></a>
As arhak has previously commented, we do not use an id more than once on a page, they must be unique. Here are the following changes:
Changed each #cf to class .cf.
Added display:table-cell to each .cf so that they are side-by-side.
Changed each .cf dimensions to something manageable 50 x 50px.
Replaced non-functioning <img> src to working values*.
Decreased the size of each .cf to 50 x 50px*.
All of these changes are optional with the exception of the first and second changes.
*I know that your relative urls work for you, but an example that doesn't work here will make things harder to demonstrate. In the future if you have images, use those or images of equivalent size in your examples. If we don't know that 50 x 50px is insufficient for your requirements, that will slowdown the process in finding a resolution.
SNIPPET
body {
color: #fff;
background-color: #000000;
background-image: url('Background Image');
background-repeat: no-repeat;
}
a {
color: #0000FF;
}
a:visited {
color: #800080;
}
a:hover {
color: #008000;
}
a:active {
color: #FF0000;
}
.cf {
position: relative;
height: 50px;
width: 50px;
margin: 0 auto;
display:table-cell;
}
.cf img {
position: absolute;
left: 0;
-webkit-transition: opacity 200ms ease-in-out;
-moz-transition: opacity 200ms ease-in-out;
-o-transition: opacity 200ms ease-in-out;
transition: opacity 200ms ease-in-out;
}
.cf img.top:hover {
opacity: 0;
}
<body>
<a href="http://example.com/page1">
<div class="cf">
<img class="bottom" src='http://placehold.it/50x50/00f/fff?text=1'>
<img class="top" src='http://placehold.it/50x50/cf0/000?text=2'>
</div>
</a>
<a href="http://example.com/page2">
<div class="cf">
<img class="bottom" src='http://placehold.it/50x50/0e0/110?text=3'>
<img class="top" src='http://placehold.it/50x50/0bb/011?text=4'>
</div>
</a>
<a href="http://example.com/page3">
<div class="cf">
<img class="bottom" src='http://placehold.it/50x50/fff/000?text=5'>
<img class='top' src='http://placehold.it/50x50/f00/fff?text=6'>
</div>
</a>
</body>
body {
color:#000000;
background-color:#000000;
background-image:url('Background Image');
background-repeat:no-repeat;
}
a { color:#0000FF; }
a:visited { color:#800080; }
a:hover { color:#008000; }
a:active { color:#FF0000; }
#cf img {
text-align: center;
}
#cf img.top:hover {
opacity:0;
}
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<body>
<a href="http://example.com/page1">
<div class="col-xs-12 form-group" id="cf">
<img class="bottom col-xs-6" src="images/img_a_1.jpg" />
<img class="top col-xs-6" src="images/img_a_2.jpg" />
</div></a>
<a href="http://example.com/page2">
<div class="col-xs-12 form-group" id="cf">
<img class="bottom col-xs-6" src="images/img_b_1.jpg" />
<img class="top col-xs-6" src="images/img_b_2.jpg" />
</div></a>
<a href="http://example.com/page3">
<div class="col-xs-12 form-group" id="cf">
<img class="bottom col-xs-6" src="images/img_c_1.jpg" />
<img class="top col-xs-6" src="images/img_c_2.jpg" />
</div></a>
</body>
Related
I have two divs with .container class which are not stacking properly. Instead, they overlap.
This is my code:
HTML
<div id="crossfadingImages" class="container">
<img src="./media/..." class="bottom img-responsive" alt="..."/>
<img src="./media/..." class="top img-responsive" alt="..."/>
</div>
<div id="about" class="container">
<div class="row">
<div class="col-sm-6">
<p>about...</p>
</div>
<div class="col-sm-6">
</div>
</div>
</div>
CSS
#crossfadingImages{
position: relative;
width: 100%;
padding: 0;
margin-top: 55px;
}
#crossfadingImages img{
position: absolute;
left: 0;
-webkit-transition: opacity 3s ease-in-out;
-moz-transition: opacity 3s ease-in-out;
-o-transition: opacity 3s ease-in-out;
transition: opacity 3s ease-in-out;
}
#crossfadingImages img.top:hover{
opacity: 0;
}
I think the problem is absolute position of images in crossfadingImages div.
Please provide your solution to my problem as well as an explanation.
Then you can you the hover() function
$(document).ready(function() {
$('#crossfadingImages img').hover(function() {
$('#crossfadingImages img:first-child').stop().fadeOut(500);
$('#crossfadingImages img:last-child').stop().fadeIn(500);
},
function() {
$('#crossfadingImages img:first-child').stop().fadeIn(500);
$('#crossfadingImages img:last-child').stop().fadeOut(500);
});
});
#crossfadingImages {
width: 100%;
padding: 0;
margin-top: 55px;
top: 0;
display: block;
}
#crossfadingImages img {
position: absolute;
width: 45%;
left: 0;
}
#crossfadingImages img:last-child {
display: none;
}
#about{
position:relative;
top:80px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div id="crossfadingImages" class="container">
<img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" class="bottom img-responsive" alt="..." />
<img src="https://upload.wikimedia.org/wikipedia/commons/4/4a/Logo_2013_Google.png" class="top img-responsive" alt="..." />
</div>
<div id="about" class="container">
<div class="row">
<div class="col-sm-6">
<p>about...</p>
</div>
<div class="col-sm-6">
</div>
</div>
</div>
Ok, I managed to solve this problem by using only CSS.
NOTE: This will only work if you have two images (JPG or JPEG format) of the same size. If they aren't the same size then the bottom image will be shown all the time cause we are just changing opacity of top image.
#crossfadingImages{
position: relative;
width: 100%;
padding: 0;
margin-top: 55px;
}
#crossfadingImages img{
left: 0;
width: 45%;
-webkit-transition: opacity 3s ease-in-out;
-moz-transition: opacity 3s ease-in-out;
-o-transition: opacity 3s ease-in-out;
transition: opacity 3s ease-in-out;
}
#crossfadingImages img.top:hover{
opacity: 0;
}
.bottom-image{
position: absolute;
}
.top-image{
position: relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div id="crossfadingImages" class="container">
<img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" class="bottom img-responsive bottom-image" alt="..."/>
<img src="https://upload.wikimedia.org/wikipedia/commons/4/4a/Logo_2013_Google.png" class="top img-responsive top-image" alt="..."/>
</div>
<div id="about" class="container">
<div class="row">
<div class="col-sm-6">
<p>about...</p>
</div>
<div class="col-sm-6">
</div>
</div>
</div>
I have built a hover effect for my gallery. The gallery is within a Bootstrap Grid.
The hover itself works fine, but in some screen sizes the overlay goes over the gallery images.
Has anybody an idea or a solution or a hint for this problem?
Here an example:
demo
HTML:
<div class="container">
<div class="row">
<div class="col-md-4 col-sm-4">
<a href="http://www.google.com">
<div class="box">
<img class="img-responsive" src="http://placehold.it/300x300" />
<div class="overbox">
<div class="title overtext">Client</div>
<div class="tagline overtext">Tag</div>
</div>
</div>
</a>
</div>
<div class="col-md-4 col-sm-4">
<a href="http://www.google.com">
<div class="box">
<img class="img-responsive" src="http://placehold.it/300x300" />
<div class="overbox">
<div class="title overtext">Client</div>
<div class="tagline overtext">Tag</div>
</div>
</div>
</a>
</div>
<div class="col-md-4 col-sm-4">
<a href="http://www.google.com">
<div class="box">
<img class="img-responsive" src="http://placehold.it/300x300" />
<div class="overbox">
<div class="title overtext">Client</div>
<div class="tagline overtext">Tag</div>
</div>
</div>
</a>
</div>
</div>
</div>
CSS:
.box {
position: relative;
cursor: pointer;
width: 100%;
min-height: 100%;
overflow: hidden;
margin-bottom: 30px;
}
.box .overbox {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 100;
background-color: rgba(204, 36, 42, 0.75);
color: #fff;
opacity: 0;
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
transition: all 300ms ease-out;
}
.box:hover .overbox {
opacity: 1;
}
.box .title {
font-size: 22px;
line-height: 131%;
font-weight: 400;
text-align: center;
padding-top: 95px;
}
#media (max-width: 991px) {
.box .title {
padding-top: 43px;
}
}
.box .tagline {
position: absolute;
bottom: 0px;
padding-top: 16px;
padding-bottom: 16px;
width: 100%;
display: flex;
justify-content: center;
font-size: 16px;
font-weight: 400;
font-style: italic;
border-top: 1px solid rgb(255, 255, 255);
}
.box_client {
position: relative;
width: 100%;
height: 100%;
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
transition: all 300ms ease-out;
}
.box_client:hover {
background: rgb(235, 234, 233);
-webkit-filter: grayscale(0%);
-moz-filter: grayscale(0%);
-ms-filter: grayscale(0%);
-o-filter: grayscale(0%);
filter: grayscale(0%);
}
.img-responsive {
margin: 0 auto;
}
the overlay goes over the gallery images because you overlay has width:100%; and when the image is smaller than the width of its container the overlay goes over the gallery image because of the width of image
you have 2 options you can make the image width:100% or you can change the style of .box class and remove width:100%; and make its display:inline-block;
.box {
position: relative;
cursor: pointer;
// width: 100%; // remove this
display:inline-block; // add this
min-height: 100%;
overflow: hidden;
margin-bottom: 30px;
}
The Bootstrap column is growing and shrinking while the image has the same fixed size. So .responsive-image is smaller than its parent div. There are a few solutions:
1) Remove the image in the html and have it as a background-image
.box {
background: url(image-url) cover no-repeat;
}
2) Make the image 100% width
.response-image {
width: 100%;
}
3) Or as Ahmed Salama suggests, remove the width: 100% and add display: inline-block;
Your placeholder is smaller then the parent div element, which fits into the whole witdh of it's parent. Thats caused by the class img-responsive, that itself fits the the image to "max-width: 100%". You should use a bigger image or fit it to the size to your parent box, what is not recommended.
In this pen, i changed the placeholdersizes to 767px x 767px: http://codepen.io/pure180/details/OXpNxM/
HTML:
<div class="col-md-4 col-sm-4">
<a href="http://www.google.com">
<div class="box">
<img class="img-responsive" src="http://placehold.it/767x767" />
<div class="overbox">
<div class="title overtext">Client</div>
<div class="tagline overtext">Tag</div>
</div>
</div>
</a>
</div>
<div class="col-md-4 col-sm-4">
<a href="http://www.google.com">
<div class="box">
<img class="img-responsive" src="http://placehold.it/767x767" />
<div class="overbox">
<div class="title overtext">Client</div>
<div class="tagline overtext">Tag</div>
</div>
</div>
</a>
</div>
<div class="col-md-4 col-sm-4">
<a href="http://www.google.com">
<div class="box">
<img class="img-responsive" src="http://placehold.it/767x767" />
<div class="overbox">
<div class="title overtext">Client</div>
<div class="tagline overtext">Tag</div>
</div>
</div>
</a>
</div>
</div>
</div>
I fixed with this
.box {
position: relative;
cursor: pointer;
max-width: 300px;
min-height: 100%;
overflow: hidden;
margin: 0 auto;
margin-bottom: 30px;}
Here's my approach: https://jsfiddle.net/5f285ask/3/
.box {
position: relative;
display: inline-block;
}
.box .overbox {
background-color: rgba(204, 36, 42, 0.75);
height: 100%;
left: 0;
opacity: 0;
position: absolute;
top: 0;
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
transition: all 300ms ease-out;
width: 100%;
}
.box:hover .overbox {
opacity: 1;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-4 col-sm-4">
<div class="box">
<a href="#">
<img alt="" src="http://placehold.it/300x300" class="img-responsive">
<div class="overbox">
overbox content
</div>
</a>
</div>
</div>
I am trying to place some text in the center-bottom of a div which contains an overlay and image.
But how can i achieve this?
HTML code:
<div class="container">
<div class="row team-images">
<div class="col-sm-3">
<div class="team-item">
<div class="team-image-overlay"></div>
<img src="http://placehold.it/400x400" class="img-responsive" alt="" />
</div>
</div>
<div class="col-sm-3">
<div class="team-item">
<div class="team-image-overlay"></div>
<img src="http://placehold.it/400x400" class="img-responsive" alt="" />
</div>
</div>
<div class="col-sm-3">
<div class="team-item">
<div class="team-image-overlay"></div>
<img src="http://placehold.it/400x400" class="img-responsive" alt="" />
</div>
</div>
</div>
</div>
CSS code:
.team-images .team-item {
position: relative;
}
.team-images img {
width: 100%;
height: 100%;
margin: 0 0 15px;
}
.team-images .team-image-overlay {
position: absolute;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(41, 128, 185, 0.4);
color: #fff;
-webkit-transition: all ease .5s;
-moz-transition: all ease .5s;
transition: all ease .5s;
}
.team-images .team-image-overlay:hover {
background: rgba(24, 188, 156, 0);
}
Here is a complete example of whats created so far: https://jsfiddle.net/prp794Lb/1/
How about this?
<div class="container">
<div class="row team-images">
<div class="col-sm-3">
<div class="team-item">
<div class="team-text">Text here</div>
<div class="team-image-overlay"></div>
<img src="http://placehold.it/400x400" class="img-responsive" alt="" />
</div>
</div>
<div class="col-sm-3">
<div class="team-item">
<div class="team-text">Lots and lots and lots and lots and lots of text here</div>
<div class="team-image-overlay"></div>
<img src="http://placehold.it/400x400" class="img-responsive" alt="" />
</div>
</div>
<div class="col-sm-3">
<div class="team-item">
<div class="team-text">Text here</div>
<div class="team-image-overlay"></div>
<img src="http://placehold.it/400x400" class="img-responsive" alt="" />
</div>
</div>
</div>
/* Latest compiled and minified CSS included as External Resource*/
/* Optional theme */
#import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
body {
margin: 10px;
}
.team-images .team-item {
position: relative;
}
.team-images img {
width: 100%;
height: 100%;
margin: 0 0 15px;
}
.team-images .team-image-overlay {
position: absolute;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(41, 128, 185, 0.4);
color: #fff;
-webkit-transition: all ease .5s;
-moz-transition: all ease .5s;
transition: all ease .5s;
}
.team-images .team-image-overlay:hover {
background: rgba(24, 188, 156, 0);
}
.team-item .team-text {
position: absolute;
width: 100%;
bottom: 0;
text-align: center;
}
https://jsfiddle.net/wL5Lf5se/3/
Go for span inside overlay and style it like this:
Demo
.team-images .team-image-overlay span {
display:block;
text-align:center;
position:absolute;
bottom:20px;
left:20px;
right:20px;
opacity:0;
transition: all .3s ease;
color:#333;
}
.team-images .team-image-overlay:hover span {
display:block;
text-align:center;
position:absolute;
bottom:20px;
left:20px;
right:20px;
opacity:1;
}
I am new to HTML and CSS, I have found out how to fade when mouseover, but when I mouseover, how can I add in text too? Here is my HTML and CSS:
HTML:
<div class="showTeams">
<p>Please, select a team you'd like to view:</p>
<table class="center">
<tr>
<th>
<div class="tZ"> <a href="#">
<img id="tz" src="../images/teamZeus-pic.png" class="hover item-fade" alt="team Zeus" title="team Zeus"/>
</a>
</div>
</th>
<th>
<div class="zC"> <a href="#">
<img src="../images/zeusCreations-pic.png" class="hover item-fade" alt="zeus Creations" title="zeus Creations"/>
</a>
</div>
</th>
</tr>
</table>
</div>
CSS:
.tZ {
display:inline-block;
background:#000;
}
.zC {
display:inline-block;
background:#000;
}
.item-fade {
vertical-align:top;
opacity: 1;
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
}
.hover:hover {
opacity:0.2;
}
I want text to come in at the same speed as the background fade. Thanks guys
I'm not sure if I understand what you want, but I tryed something so you can take a look to this:
<div class="showTeams">
<p>Please, select a team you'd like to view:</p>
<table class="center">
<tr>
<th>
<div class="tZ"> <a href="#">
<img id="tz" src="../images/teamZeus-pic.png" class="hover item-fade" alt="team Zeus" title="team Zeus"/>
</a>
<div id="hover-content">
Text shows only on mouseover
</div>
</div>
</th>
<th>
<div class="zC"> <a href="#">
<img src="../images/zeusCreations-pic.png" class="hover item-fade" alt="zeus Creations" title="zeus Creations"/>
</a>
</div>
</th>
</tr>
</table>
</div>
CSS:
.tZ {
display:inline-block;
background:#000;
}
.zC {
display:inline-block;
background:#000;
}
.item-fade {
vertical-align:top;
opacity: 1;
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
}
.hover:hover {
opacity:0.2;
}
#hover-content {
color: white;
display:block;
}
.tZ:hover #hover-content {
display:none;
}
here are two way to perform this with css (jsfiddle setup for css) and jquery (jsfiddle setup for jquery). youi can use any way to perform
with css you need to add text in th like
<h2 class="heading">This is heading</h2>
and css will
h2.heading {
position: absolute;
bottom: 101px;
color: #fff;
opacity:0;
margin-left: 99px;
}
th:hover .heading
{
opacity:1;
}
with jquery
add this style
h2.heading {
position: absolute;
bottom: 101px;
color: #fff;
display:none;
margin-left: 99px;
}
and script
$(document).ready(function()
{
$('th').hover(function()
{
$(this).find('.heading').show();
})
})
The html is given below
.container {
width: 90%;
background: #eee;
margin: 10px auto;
position: relative;
text-align:center;
}
#cf {
background: green;
position: relative;
height: 360px;
width: 640px;
display:inline-block;
margin: 20px;
}
#cf img {
position:absolute;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}
#cf img.top:hover {
opacity:0;
}
<div class="container">
<div id="cf">
<img class="bottom" src="http://placehold.it/640x360" />
<img class="top" src="http://placehold.it/640x360" />
</div><!--
--><div id="cf">
<img class="bottom" src="http://placehold.it/640x360" />
<img class="top" src="http://placehold.it/640x360" />
</div><!--
--><div id="cf">
<img class="bottom" src="http://placehold.it/640x360" />
<img class="top" src="http://placehold.it/640x360" />
</div><!--
--><div id="cf">
<img class="bottom" src="http://placehold.it/640x360" />
<img class="top" src="http://placehold.it/640x360" />
</div>
</div>
The background is properly aligned but the images are offset . What have i done wrong ? Why is the image not being positioned properly?
All the images used are of the dimension 360px height and 640px width.
The images are offset because you are using text-align: center on the container which means that the origin for your positioned child elements is no longer 0 0, but 50% 0 (centre top):
.container {
...
text-align:center;
}
To get around this you just need to override this for the child elements:
#cf {
..
text-align: left;
}
Demo below
.container {
width: 90%;
background: #eee;
margin: 10px auto;
position: relative;
text-align:center;
}
#cf {
background: green;
position: relative;
height: 360px;
width: 640px;
display:inline-block;
margin: 20px;
text-align: left;
}
#cf img {
position:absolute;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}
#cf img.top:hover {
opacity:0;
}
<div class="container">
<div id="cf">
<img class="bottom" src="http://placehold.it/640x360" />
<img class="top" src="http://placehold.it/640x360" />
</div><!--
--><div id="cf">
<img class="bottom" src="http://placehold.it/640x360" />
<img class="top" src="http://placehold.it/640x360" />
</div><!--
--><div id="cf">
<img class="bottom" src="http://placehold.it/640x360" />
<img class="top" src="http://placehold.it/640x360" />
</div><!--
--><div id="cf">
<img class="bottom" src="http://placehold.it/640x360" />
<img class="top" src="http://placehold.it/640x360" />
</div>
</div>
But your HTML is invalid. IDs must be unique. You should be using a class for your cf element like so...
.container {
width: 90%;
background: #eee;
margin: 10px auto;
position: relative;
text-align:center;
}
.cf {
background: green;
position: relative;
height: 360px;
width: 640px;
display:inline-block;
margin: 20px;
text-align: left;
}
.cf img {
position:absolute;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}
.cf img.top:hover {
opacity:0;
}
<div class="container">
<div class="cf">
<img class="bottom" src="http://placehold.it/640x360" />
<img class="top" src="http://placehold.it/640x360" />
</div><!--
--><div class="cf">
<img class="bottom" src="http://placehold.it/640x360" />
<img class="top" src="http://placehold.it/640x360" />
</div><!--
--><div class="cf">
<img class="bottom" src="http://placehold.it/640x360" />
<img class="top" src="http://placehold.it/640x360" />
</div><!--
--><div class="cf">
<img class="bottom" src="http://placehold.it/640x360" />
<img class="top" src="http://placehold.it/640x360" />
</div>
</div>