Menu
I am using bootstrap 3 thumbnail as follows:
<div class="thumbnail"> <img src="/img/robot.jpg" alt="..." /> <div class="caption post-content"> <h3>Robots!</h3> <p>Lorem ipsum dolor sit amet</p> </div> </div> I want the caption to overlay on image but the way being done on Mashable.com
I have tried following but no luck :((
.post-content { background: none repeat scroll 0 0 #FFFFFF; opacity: 0.5; margin: -54px 20px 12px; position: relative; } How can I overlay a caption div on top of the image but just like (Mashable.com)?
This works but I want it centered just like Mashable. and centered for every image. for some images, it is not centered.
415
Add class=carousel-caption to the HTML tag which contains your text which needs to be positioned over your image !. (And then if you wish add custom css top:xyz% to your . carousel-caption class in css stylesheet to make it align vertically at middle.)
Image Overlay: Image overlay generally refers to the image being a background image and inserting texts, and links inside of that image. It can be done using the 'card-img-overlay' property that is present in bootstrap. Also, we can do it with normal CSS along with a bootstrap theme.
On the Insert tab, in the Text group, click Text Box, click anywhere near the picture, and then type your text. To change the font or style of the text, highlight the text, right-click it, and then select the text formatting you want on the shortcut menu.
CSS position property is used to set the position of text over an image. This can be done by enclosing the image and text in an HTML “div”. Then make the position of div “relative” and that of text “absolute”. The absolute elements are positioned relative to their parent (div).
You need to set the thumbnail class to position relative then the post-content to absolute.
Check this fiddle
.post-content { top:0; left:0; position: absolute; } .thumbnail{ position:relative; } Giving it top and left 0 will make it appear in the top left corner.
126
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
