I have an image gallery. The thumbnails are 240px in width, but the heights vary. I tried cropping the images so that they are all 150 pixels high.
At the moment I've got this:
HTML
<div data-category="category1">
<a href="image1.jpg" rel="lightbox[on]" title="">
<img src="image1.jpg" width="" height="" />
</a></div>
<div data-category="category1">
<a href="image2.jpg" rel="lightbox[on]" title="">
<img src="image2.jpg" width="" height="" />
</a></div>
<div data-category="category1">
<a href="image3.jpg" rel="lightbox[on]" title="">
<img src="image3.jpg" width="" height="" />
</a></div>
<div data-category="category2">
<a href="image4.jpg" rel="lightbox[on]" title="">
<img src="image4.jpg" width="" height="" />
</a></div>
<div data-category="category2">
<a href="image5.jpg" rel="lightbox[on]" title="">
<img src="image5.jpg" width="" height="" />
</a></div>
<div data-category="category2">
<a href="image6.jpg" rel="lightbox[on]" title="">
<img src="image6.jpg" width="" height="" />
</a></div>
CSS
.gallery {
position:relative;
}
.gallery > div {
position:absolute;
}
.gallery > div > a > img {
position:absolute;
top: 0;
left: 0;
clip: rect(0px,240px,150px,0px);
overflow: hidden;
border:none;
}
This works with cropping the images to 150px, but only the images on the top row are aligned. The images on the other rows are not aligned because they are being placed directly below the original heights of the images on the row above. (The cropping doesn't get rid of the rest of the image. The rest of the image is not visible, but it's still there,). What do I need to add to my CSS to sort this out?
Surely your code is a bit more complex of what you paste here, but please take in consideration this base css:
.gallery { position: relative; }
.gallery > div { float: left; }
.gallery > div > a { max-height: 150px; width: 240px; overflow: hidden; display: inline-block; }
.gallery > div > a > img { border: none; }
Here a working example:
http://jsfiddle.net/3W7Xt/
Regards
Related
When I use a Wordpress gallery shortcode [gallery columns="3" size="medium" link="none" ids="13,14,11,16,18,19"] it displays a 3 column gallery but the images heights don’t match on each row, and it leaves ugly space below panoramic images.
How can I get it so that the height of all images on each row is the same, even if it automatically crops away some of the sides of each image?
If you're using the default wordpress gallery markup you can override the display by adding these css classes:
We're defining a fixed aspect ratio for wrapping gallery divs and using object-fit: to fill the frame.
In this example we are using a square ratio.
.gallery {
display: flex;
flex-wrap: wrap;
margin: 3em 0 3em -0.8em;
width: 100%;
}
* {
box-sizing: border-box
}
.gallery-item{
width:33.333%;
margin:0;
padding:0.3em;
}
/* aspect ratio hack*/
.gallery-icon {
position:relative;
padding-bottom:100%;
/* use 56.25% for 16/9 ration */
}
.gallery-icon a,
.gallery-icon img
{
position: absolute;
top:0;
right:0;
bottom:0;
left:0;
height:100%;
width:100%
}
/* prevent distortions */
.gallery-icon img{
object-fit:cover;
object-position: 50%
}
<div id="gallery-1" class="gallery galleryid-716 gallery-columns-3 gallery-size-thumbnail">
<figure class="gallery-item">
<div class="gallery-icon landscape">
<img width="200" height="400" src="https://via.placeholder.com/200x400" class="attachment-thumbnail size-thumbnail" alt="thumb" >
</div>
</figure>
<figure class="gallery-item">
<div class="gallery-icon landscape">
<img width="300" height="400" src="https://via.placeholder.com/200x100" class="attachment-thumbnail size-thumbnail" alt="thumb" >
</div>
</figure>
<figure class="gallery-item">
<div class="gallery-icon landscape">
<img width="200" height="400" src="https://via.placeholder.com/400x100" class="attachment-thumbnail size-thumbnail" alt="thumb" >
</div>
</figure>
<figure class="gallery-item">
<div class="gallery-icon landscape">
<img width="200" height="400" src="https://via.placeholder.com/200" class="attachment-thumbnail size-thumbnail" alt="thumb" >
</div>
</figure>
</div>
You could also use css property aspect-ratio: but it's still not widely supported.
i have 4 different icons and based on which icon i hover i want to change the background image in a div. The html is like so
<div class="col side">
<i id="icon1"></i>
<i id="icon2"></i>
<i id="icon3"></i>
<i id="icon4"></i>
</div>
<div class="col">
<img src="img1" id="img1" class="content" alt="" />
<img src="img2" id="img2" class="content" alt="" />
<img src="img3" id="img3" class="content" alt="" />
<img src="img4" id="img4" class="content" alt="" />
</div>
So when i hover icon1 i want to display img1 and so on. I know how to do it with jquery/javascript but is it possible with pure css?
it is not possible but try with adding background image on hover to each icon
#icon1:hover
{
background: url("path to img1");
}
like wise add this to all icons but i think it will result in bad alignment on hover
You can try some thing like
.content {
display: none;
}
#icon1:hover + #img1{
display: block; // or inline-block
}
#icon2:hover + #img2{
display: block;
}
#icon3:hover + #img3{
display: block;
}
#icon4:hover + #img4{
display: block;
}
It can be done with changed html-structure as someone has already mentioned in the comments. For example,
.content {
display: none;
}
#icon1:hover ~ .col img#img1 {
display: block;
}
#icon2:hover ~ .col img#img2 {
display: block;
}
<div class="col side">
<i id="icon1">First Icon</i> <i id="icon2">Second Icon</i>
<div>Images:</div>
<div class="col">
<img src="https://themcrazycats.files.wordpress.com/2020/11/1ce50-b8480db4-5bda-4912-84e4-3f8d79cae545.jpeg?w=400&h=200&crop=1" id="img1" class="content" alt="" />
<img src="https://themcrazycats.files.wordpress.com/2020/11/a66f0-4c055b18-860a-46b6-95a2-967b72e3547b.jpeg?w=400&h=200&crop=1" id="img2" class="content" alt="" />
</div>
</div>
The key here is to make possible usage of css ~ selector by placing .col inside .side. Why? There is no parent selector as of now in css as pointed out here.
I am trying to done is have a responsive div with 2 pictures centered, one in each div.
What I am want it is to drop down, when the screen is small and not big enought to display them side by side.
At the moment with the below when the screen is smaller it pushes the images into each other.
<style>
.container{width:100%}
.inner_container{float:left;width:50%;}
.img_container{width:250px;margin:0 auto:padding-bottom:5px;}
</style>
<div class="container">
<div class="inner_container">
<div class="img_container">
<img src="left_img.png" width="250" height="70" alt="" border="0">
</div>
</div>
<div class="inner_container">
<div class="img_container">
<img src="right_img.png" width="250" height="70" alt="" border="0">
</div>
</div>
</div>
You're using the wrong styles to do what you're trying to do. Mainly, you've set a fixed width of 250px to your img_container div which is why the images aren't getting scaled down. This the correct way to achieve what you want:
.container {
width: 100%
}
.inner_container {
width: 49%;
display: inline-block;
}
.img_container {
width: 100%;
}
.img_container a img {
width: 100%;
}
<div class="container">
<div class="inner_container">
<div class="img_container">
<a href="http://www.google.co.uk">
<img src="http://lorempixel.com/400/200/" width="250" height="70" alt="" border="0">
</a>
</div>
</div>
<div class="inner_container">
<div class="img_container">
<a href="http://www.google.com">
<img src="http://lorempixel.com/400/200/" width="250" height="70" alt="" border="0">
</a>
</div>
</div>
</div>
With the above code, the images keep on getting scaled down and stay on the same line until the window size is reduced to very small. If you would want them to appear on two separate lines after a particular width, you will need to use media-queries like this:
.container{width:100%}
.inner_container { width: 49%; display: inline-block; }
.img_container { width: 100%; }
.img_container a img { width: 100%; }
#media (max-width: 650px) {
.inner_container { width: 100%; display: block; }
}
<div class="container">
<div class="inner_container">
<div class="img_container">
<img src="http://lorempixel.com/400/200/" width="250" height="70" alt="" border="0">
</div>
</div>
<div class="inner_container">
<div class="img_container">
<img src="http://lorempixel.com/400/200/" width="250" height="70" alt="" border="0">
</div>
</div>
</div>
Set a min-width on the .inner_container
.container {
width:100%;
overflow: hidden;
}
.inner_container {
float:left;
width:50%;
min-width: 250px;
}
.img_container {
width:250px;
margin:0 auto;
padding-bottom:5px;
text-align: center;
}
http://jsfiddle.net/63pnotjc/
When I posted my reply, I didn't notice Fahad, Show code snippet link.
Thank you both for your help, this is the css code I went with in the end.
.container{width:100%;overflow:hidden;}
.inner_container{display:inline-block;width:49%;}
.img_container{width:250px;margin:0 auto;text-align:center;padding-bottom:5px;}
#media (max-width:501px){
.inner_container{display:block;width:100%;}
}
Once again thank you both for your help :)
I have two images that need to kept inline; I want to write a caption under each image.
<center>
<a href="http://example.com/hello">
<img src="hello.png" width="100px" height="100px">
</a>
<a href="http://example.com/hi">
<img src="hi.png" width="100px" height="100px">
</a>
</center>
How can I implement?
Figure and Figcaption tags:
<figure>
<img src='image.jpg' alt='missing' />
<figcaption>Caption goes here</figcaption>
</figure>
Gotta love HTML5.
See sample
#container {
text-align: center;
}
a, figure {
display: inline-block;
}
figcaption {
margin: 10px 0 0 0;
font-variant: small-caps;
font-family: Arial;
font-weight: bold;
color: #bb3333;
}
figure {
padding: 5px;
}
img:hover {
transform: scale(1.1);
-ms-transform: scale(1.1);
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-o-transform: scale(1.1);
}
img {
transition: transform 0.2s;
-webkit-transition: -webkit-transform 0.2s;
-moz-transition: -moz-transform 0.2s;
-o-transition: -o-transform 0.2s;
}
<div id="container">
<a href="#">
<figure>
<img src="http://lorempixel.com/100/100/nature/1/" width="100px" height="100px" />
<figcaption>First image</figcaption>
</figure>
</a>
<a href="#">
<figure>
<img src="http://lorempixel.com/100/100/nature/2/" width="100px" height="100px" />
<figcaption>Second image</figcaption>
</figure>
</a>
</div>
CSS
#images{
text-align:center;
margin:50px auto;
}
#images a{
margin:0px 20px;
display:inline-block;
text-decoration:none;
color:black;
}
HTML
<div id="images">
<a href="http://xyz.com/hello">
<img src="hello.png" width="100px" height="100px">
<div class="caption">Caption 1</div>
</a>
<a href="http://xyz.com/hi">
<img src="hi.png" width="100px" height="100px">
<div class="caption">Caption 2</div>
</a>
</div>
A fiddle is here.
For responsive images. You can add the picture and source tags within the figure tag.
<figure>
<picture>
<source media="(min-width: 750px)" srcset="images/image_2x.jpg"/>
<source media="(min-width: 500px)" srcset="images/image.jpg" />
<img src="images.jpg" alt="An image">
</picture>
<figcaption>Caption goes here</figcaption>
</figure>
Put the image — let's say it's width is 140px — inside of a link:
<a><img src='image link' style='width: 140px'></a>
Next, put the caption in a and give it a width less than your image, while centering it:
<a>
<img src='image link' style='width: 140px'>
<div style='width: 130px; text-align: center;'>I just love to visit this most beautiful place in all the world.</div>
</a>
Next, in the link tag, style the link so that it no longer looks like a link. You can give it any color you want, but just remove any text decoration your links may carry.
<a style='text-decoration: none; color: orange;'>
<img src='image link' style='width: 140px'>
<div style='width: 130px; text-align: center;'>I just love to visit this most beautiful place in all the world.</div>
</a>
I wrapped the image with it's caption in a link so that no text could push the caption out of the way: The caption is tied to the picture by the link. Here's an example: http://www.alphaeducational.com/p/okay.html
<div style="margin: 0 auto; text-align: center; overflow: hidden;">
<div style="float: left;">
<img src="hello.png" width="100px" height="100px">
caption 1
</div>
<div style="float: left;">
<img src="hi.png" width="100px" height="100px">
caption 2
</div>
</div>
CSS is your friend; there is no need for the center tag (not to mention it is quite depreciated) nor the excessive non-breaking spaces. Here is a simple example:
CSS
.images {
text-align:center;
}
.images img {
width:100px;
height:100px;
}
.images div {
width:100px;
text-align:center;
}
.images div span {
display:block;
}
.margin_right {
margin-right:50px;
}
.float {
float:left;
}
.clear {
clear:both;
height:0;
width:0;
}
HTML
<div class="images">
<div class="float margin_right">
<img src="hello.png" width="100px" height="100px" />
<span>This is some text</span>
</div>
<div class="float">
<img src="hi.png" width="100px" height="100px" />
<span>And some more text</span>
</div>
<span class="clear"></span>
</div>
To be more semantically correct and answer the OPs orginal question about aligning them side by side I would use this:
HTML
<div class="items">
<figure>
<img src="hello.png" width="100px" height="100px">
<figcaption>Caption 1</figcaption>
</figure>
<figure>
<img src="hi.png" width="100px" height="100px">
<figcaption>Caption 2</figcaption>
</figure></div>
CSS
.items{
text-align:center;
margin:50px auto;}
.items figure{
margin:0px 20px;
display:inline-block;
text-decoration:none;
color:black;}
https://jsfiddle.net/c7borg/jLzc6h72/3/
The <figcaption> tag in HTML5 allows you to enter text to your image for example:
<figcaption>
Your text here
</figcaption>.
You can then use CSS to position the text where it should be on the image.
<table>
<tr><td><img ...><td><img ...>
<tr><td>caption1<td>caption2
</table>
Style as desired.
I'm trying to add some hover effect on some images I got.
<div id="horizontal_list">
<div class="grid_3 first overlay">
<a href="#">
<img border="0" alt="first" src="path">
</a>
</div>
<div class="grid_3 overlay">
<a href="#">
<img border="0" alt="first" src="path">
</a>
</div>
</div>
When I hover the div with the overlay class I want another image to hover on top of the imagetag..
I've got the following css:
#horizontal_list{
margin-top: 18px;
height: 330px;
}
.grid_3{
display: inline;
float: left;
margin-left: 10px;
margin-right: 10px;
}
.first{
margin-left: 0px !important;
}
.last{
margin-right: 0px !important;
}
.overlay{
height: 330px;
}
.overlay:hover{
background: url('path') no-repeat;
}
I'm not sure what you mean by 'imagetag' but here is what I think you mean:
What you can do, is adding the second image in your html:
<div id="horizontal_list">
<div class="grid_3 first overlay">
<a href="#">
<img class="first_img" border="0" alt="first" src="path">
<img class="sec_img" border="0" alt="second" src="path">
</a>
</div>
<div class="grid_3 overlay">
<a href="#">
<img class="first_img" border="0" alt="first" src="path">
<img class="sec_img" border="0" alt="second" src="path">
</a>
</div>
</div>
And in your CSS:
.overlay {position: relative;}
.overlay:hover a img.sec_img {display: none;}
.overlay:hover a img.sec_img {
display: block;
position: absolute;
background: url(path) no-repeat;
top: 0;
left: 0;
width: [imgwidth]px;
height: [imgheight]px;
}
Be sure to change [imgwidth] and [imgheight] into the correct dimensions.
HTML
<div class="hoverholder">
<a href="#" class="picone">
<img src="#" alt="" />
</a>
<a href="#" class="pictwo">
<img src="#" alt="" />
</a>
</div>
CSS
.pictwo {display:none;}
.hoverholder:hover .picone{
display:none;
}
.hoverholder:hover .pictwo{
display:block;
}