I have this code and unfortunatlyI can't touch the html to make the figcaption a child of the <a>. The thing is that the figcaption is absolutly positioned over the <a> so that area is not clickable. I'd like to make it clicable with css, is it possible?
Right now, the tag is under the figcaption, so the figcaption prevents the click from happening.
<figure class="gallery-item">
<div class="gallery-icon landscape">
<a href="" style="
display: block;
height: 100%;
width: 100%;
">
<img width="200" height="162" src="http://static.hogarmania.com/archivos/201204/estrenimiento-gato-bebe2-xl-668x400x80xX.jpg">
</a>
</div>
<figcaption class="wp-caption-text gallery-caption" id="gallery-1-123">
Pintura al óleo de un planeta toroidal
</figcaption>
</figure>
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 this css code
#menu:hover img
{
margin-bottom:50px;
}
and html
<figure id="menu">
<img src="demo HTML/CaptionHoverEffects/demo 1/images/1.png"/>
<figcaption class="content">
<h3>Settings</h3>
<span>Jacob Cummings</span>
Take a look
</figcaption>
</figure>
At css code, when I change margin-bottom to margin-left or margin-right, it safe run, but with margin-bottom, it's not effect. How can I solve it?
#menu:hover img {
margin-bottom: 50px;
}
<figure id="menu">
<img src="http://placehold.it/350x150" />
<figcaption class="content">
<h3>Settings</h3>
<span>Jacob Cummings</span>
Take a look
</figcaption>
</figure>
HTML :
<a href="">
<img class="center" src="">
</a>
CSS :
.center { display: block; margin: 0 auto; }
That centers the image, but the problem is any extra white-space around the image is also clickable. Is there a way to fix that?
(Images vary in size)
You could just wrap a div around it and center the that div rather than the image itself.
<div class="center">
<a href="">
<img src="">
</a>
</div>
And then add a style definition for the div.
.center { margin: 0 auto; }
The only option I see would be putting the anchor in a div (non -clickable, with the size and style of your current anchor) and sizing the anchor based on the image:
HTML:
<div class="container">
<a href="" class="anchor">
<img src="http://placehold.it/350x150" />
</a>
</div>
CSS:
.container {
width: 100%;
text-align:center;
}
JSFIDDLE:
http://jsfiddle.net/Atumra/0jncgxkb/
How about doing this
<a href="" class="center">
<img src="">
</a>
I'm building a navigation box with 3 rows and 3 columns of images. My target was to add some text below each image. I came across 'figcaption' today and although it seams like the perfect tag, i can't seam to get it to display properly.
The problem
The images display properly 'inline' until I add the 'figcaption' tags. The text appears in block (i assume), below each image which is great.. but it also forces the next image onto a new line (Even though inline block has been applied to the parent container '').
The html that i'm using goes as follows..
<section class="menu">
<h1>Menu</h1>
<br /><br />
<div>
<img src="img/image.png"><figcaption>Caption</figcaption>
<img src="img/image.png"><figcaption>Caption</figcaption>
<img src="img/image.png"><figcaption>Caption</figcaption>
</div>
***Div repeated twice***
</section>
And here is the css
.menu div {
padding: 0;}
.menu li a{display: inline;}
.menu a img{
width:32.1%; height:auto;
}
Here is a Fiddle
Thanks
According to MDN, <figcaption> needs to be inside a <figure> tag:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/figcaption
Here's an updated HTML structure:
<section class="menu">
<h1>Menu</h1>
<br />
<div>
<figure>
<a href="">
<img src="http://placekitten.com/100/100">
</a>
<figcaption>Caption</figcaption>
</figure>
<figure>
<a href="">
<img src="http://placekitten.com/100/100">
</a>
<figcaption>Caption</figcaption>
</figure>
<figure>
<a href="">
<img src="http://placekitten.com/100/100">
</a>
<figcaption>Caption</figcaption>
</figure>
</div>
</section>
and associated css:
.menu div {
padding: 0;}
.menu figure {display: inline-block;
width:100px;
}
.menu a img{
height:auto;
}
http://jsfiddle.net/DHM46/5/
I don't always do web development, but when I do CSS is the most frustrating thing I can imagine. I'm trying to create a simple class to hold an image together with description. I want to have two rows, each with three images. Very simple.
Here's my code for displaying images only, which works ok.
img {
position: relative;
margin: 0 auto;
max-width: 650px;
padding: 5px;
margin: 10px 0 5px 0;
border: 1px solid #ccc;
}
<h3>Screenshots</h3>
<p>
<img src="images/img1.png" width="200" height="140">
<img src="images/img2.png" width="200" height="140">
<img src="images/img3.png" width="200" height="140">
<img src="images/img4.png" width="200" height="140">
<img src="images/img5.png" width="200" height="140">
<img src="images/img6.png" width="200" height="140">
</p>
<h3>Installation</h3>
This shows images exactly as I want, three in each row and then there's a padding from < p > and then Installation section. To get description under images in the same div I changed img in css to div.img and htm code to:
<h3>Screenshots</h3>
<p>
<div class="img">
<a target="_blank" href="images/img1.png"><img src="images/img1.png" width="200" height="140"></a>
</div>
<div class="img">
<a target="_blank" href="images/img1.png"><img src="images/img1.png" width="200" height="140"></a>
</div>
<div class="img">
<a target="_blank" href="images/img1.png"><img src="images/img1.png" width="200" height="140"></a>
</div>
<div class="img">
<a target="_blank" href="images/img1.png"><img src="images/img1.png" width="200" height="140"></a>
</div>
<div class="img">
<a target="_blank" href="images/img1.png"><img src="images/img1.png" width="200" height="140"></a>
</div>
<div class="img">
<a target="_blank" href="images/img1.png"><img src="images/img1.png" width="200" height="140"></a>
</div>
</p>
<h3>Installation</h3>
One would have thought that the resulting webpage is going to be exactly the same as img in the first case and div.img in the second have the same attributes. It is not the case though. With this code I get each div stretched to the full width of the column and images are one under the other at the left side of the div.
I have also tried this code: http://www.w3schools.com/CSS/css_image_gallery.asp, but in this case I get Installation and all the text that follows go onto the images, ignoring < p > tag which has bottom margin.
To keep it simple: replace your divs with <span> elements, or set display: inline on your CSS for the divs. This will make them behave as you expected (as inline, not block elements).
Also:
You don't need the margin: 0 auto. It won't center inline elements as it does with block elements
You added position: relative, but don't seem to need it, either. Unless you intend to apply absolute position to something inside the div at a later point.
Here is a jsfiddle without these two properties, and adding display: inline to the divs: http://jsfiddle.net/3BwKY/.