Site Search:

How to put images side by side in a blogger post

Back>

You can put images side by side in a blogger post. You can even let the images enlarge on mouse over.
In short, you put images side by side with 2 kinds of div.
<div class="row">
<div class="column">

You enlarge an image on mouse over with hover attributes.

Here is the example.

Example

<style>
.row {
  display: flex;
}

/* Create three equal columns that sits next to each other */
.column {
  flex: 25%;
  padding: 5px;
}

.thumbnail:hover {
    position:relative;
    width:300px;
    height:auto;
    display:block;
    z-index:999;
    float: left;
}
</style>

<br />
<h2>
Magic Portals</h2>
<br />
<div class="row">
<div class="column">
Sorting
<br />
<img border="0" class="thumbnail" height="100" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9ud7VbYaIk71l6dcLJhSQ12ZdHCxOG7yujbKEon54G9UeFTOLO2833ZgLxm42DME_-Z72pXCLmXRiuv02Vk1DHIy3vvN-Z_LkcB9vh6LmSKoLQoTeI6VWQdc238w1P0ZFgatv_9vw7Um6/s200/portal-sort.jpg" width="100" />
  </div>
<div class="column">
joining
<br />
<img border="0" class="thumbnail" height="100" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwKnNqCcP1ibVIR9RyRRor7lT1SEhIkVDiwjho0epEgeoaxb8Y7FXp7s1BrEszqsnSyeRSjcgPEtQxU42ns6RyEGTktcu5NPJyYIz99lYFosP4SJys7w6xg-S4N8H_UqtoxpSmCdQ1hMhj/s200/portal-tree.jpg" width="100" />
  </div>
<div class="column">
String
<br />
<img border="0" class="thumbnail" height="100" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4xfEiDskSpuhbd5A3qlrWt60WmPDGir3BqHlqplNqYqR6aGnanDxnXeLpTPZPAOmIhw5yA8E2JpTlUp5GQ8d0lzad9aOfkwmoyVjTNb_L69p1v0bUbMZklokGXy7YzhV8XipwIDD2Tz9w/s320/portal-string.jpg" width="100" />
</div>
<div class="column">
Way
<br />
<img border="0" class="thumbnail" height="100" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6vWD1RiNcxyenJJsKNfIjKUugok28P4YG4DUaYYtJxIsktZU6Ghk9QPTalDYFZCih-mHcuAdUGW3wxsiDtM-8z2fExVtpG8QhCB3caM2kZnrH9T7XC27EbJ4X_fksv402kiq7rHCKMZnS/s320/portal.png" width="100" />
</div>
</div>
<br />