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>
Related
Unlike img/h/p and some other tags, I noticed I can't create a css for all figcaptions in a single block.
Currently I defined a block per figcaption but I'm afraid I missed some potential figcaption:
.wp-block-embed figcaption {
color: #ffffff;
}
.wp-block-image figcaption {
color: #ffffff;
}
You should be able to use the CSS begins with attribute selector, ^:
[class^='wp-block-'] figcaption
[class^='wp-block-'] figcaption {
color: red;
}
<div class="wp-block-embed">
<figure><img src="">
<figcaption>caption</figcaption>
</figure>
</div>
<div class="wp-block-image">
<figure><img src="">
<figcaption>caption</figcaption>
</figure>
</div>
<div class="foo">
<figure><img src="">
<figcaption>caption</figcaption>
</figure>
</div>
<div>
<figure><img src="">
<figcaption>caption</figcaption>
</figure>
</div>
I am working on Bootstrap website. I wanted to place text in the right side of the car. I am getting the output as:
I wanted to place text "hello" in the right side of the Car.
Code:
<div class="row text-center">
<div class="col-sm-6">
<figure>
<img src="images/category/auto.gif" alt=""/>
<figcaption class="main_service">Hello</figcaption>
</figure>
</div>
<div class="col-sm-6">
<figure>
<img src="images/category/auto.gif" alt=""/>
<figcaption>Hello</figcaption>
</figure>
</div></div>
CSS:
.main_auto {background:url(images/category/auto.gif) no-repeat;
background-size: 35% 75%;
}
.main_service {
width:254px;
height:136px;
float:left;
padding:20px 20px 0 90px;
}
I am new to Bootstrap.
You can use css position property. Declare image css position property as relative and text css position property as absolute.
Code:
<div class="row text-center">
<div class="col-sm-6">
<figure>
<img src="images/category/auto.gif" alt="" class="img-disp" />
<figcaption class="main_service">Hello</figcaption>
</figure>
</div>
<div class="col-sm-6">
<figure>
<img src="images/category/auto.gif" alt="" class="img-disp" />
<figcaption class="main_service">Hello</figcaption>
</figure>
</div>
</div>
CSS:
.img-disp{
position: relative;
}
.main_service {
position: absolute;
....
}
Than you can adjust your text position by adding top and left margin to .main_service class.
You can see result here : https://jsfiddle.net/8kcsryqy/
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>
Hi I am having trouble centering these figures. .col-centered is working on every other section that I have except for this one.
<section id="leadership" class="row col-md-7 company-leadership full-page col-centered">
<h2 class="about-title text-center">Leadership</h2>
<figure class="cap-bot col-md-2 team">
<img src="http://placehold.it/400x400" class="img-responsive">
<figcaption>
<h3>Jon Doe</h3>
<em>Title</em>
</figcaption>
</figure>
<figure class="cap-bot col-md-2 team">
<img src="http://placehold.it/400x400" class="img-responsive">
<figcaption>
<h3>Jon Doe</h3>
<em>Title</em>
</figcaption>
</figure>
<figure class="cap-bot col-md-2 team">
<img src="http://placehold.it/400x400" class="img-responsive">
<figcaption>
<h3>Jon Doe</h3>
<em>Title</em>
</figcaption>
</figure>
</section>
CSS:
.col-centered{
float: none;
margin: 0 auto;
}
Here is jsfiddle:
http://jsfiddle.net/fa6RU/
BTW - you might not be able to see the 3 figures inline because of your resolution so zoom out until you see the 3 figures under leadership. I want them inline but centered right under leadership.
Thanks!
The images and figcaption elements are not being centered, its probably easiest to create a selector for them and specify a centering attribute:
http://jsfiddle.net/fa6RU/2/
figure img { margin:0 auto; }
figcaption { text-align:center; }
Okay if that's the case, just remove
figcaption { text-align:center; }
from Lowkase's answer.
http://jsfiddle.net/4pMm2/1/
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/