I'm trying to implement a feature for my website where hovering over an image shows its caption over the bottom of the image. Any tips on how to do this?
I was trying to do it, but something in the css template I'm using was interfering.
Here are the images I want to put captions for
<section class="5grid is-gallery">
<div class="row">
<div class="4u"> <img src="images/1a.jpg" alt="">
</div>
<div class="4u"> <img src="images/2a.jpg" alt="">
</div>
<div class="4u"> <img src="images/3a.jpg" alt="">
</div>
</div>
<div class="row">
<div class="4u"> <img src="images/4a.jpg" alt="">
</div>
<div class="4u"> <img src="images/5a.jpg" alt="">
</div>
<div class="4u"> <img src="images/6a.png" alt="">
</div>
</div>
</section>
Note: I tried to use these, not exactly sure what I was doing wrong.
http://tympanus.net/codrops/2011/11/02/original-hover-effects-with-css3/
The code to achieve this would be something like this:
a {
position: relative
}
a span {
display: none;
position: absolute;
bottom: 0;
width: 100%;
padding: 10px;
background: rgba(255,255,255,.8);
}
a:hover span {
display: block
}
<a>
<img src="http://placehold.it/300x200">
<span>caption</span>
</a>
If JavaScript+jQuery is acceptable, try jQuery TipTip plugin: http://code.drewwilson.com/entry/tiptip-jquery-plugin
TipTip uses the title attribute just like the native browser tooltip does. However, the title will be copied and then removed from the element when using TipTip so that the browser tooltip will not show up.
You could use also CSS attr().
a {
position: relative;
}
a:hover:after {
content: attr(title);
position: absolute;
top: 100%;
left: 0;
white-space: nowrap;
z-index: 999;
background: #ccc;
color: black;
padding: 5px;
}
Could also use another attribute, like alt.
Related
Actually I I created an Image Slider using HTML and CSS. And I wanted to create a popup box. So before adding the functonality I created a layout for it and tried to make it in center. So when I write position:relative; bottom:300px(or whatever)it goes up but hides behind the image Slider.
.popup{
width: 900px;
height: 500px;
background-color: white;
border: 5px solid black;
position: relative;
bottom:0px;
}
<div id="slider">
<figure>
<img src="img3.jpg">
<img src="3.JPG">
<img src="4.JPG">
<img src="img3.jpg">
<img src="9.jpg" alt="">
</figure>
</div>
<center>
<div class="popup">
Dummy Text
</div>
</center>
Use z-index to specify the element you want on top:
https://www.w3schools.com/cssref/pr_pos_z-index.asp
Simply set your position with absolute.
.box .text{
position: absolute;
}
Demo jsFiddle
I have a container div with multiple varying-width, uniform-height images. The images are horizontally arranged with no gaps between them.
What I have so far:
#imageContainer {
width: 80%;
border: 1px solid blue;
position: relative;
left: 50%;
transform: translateX(-50%);
}
#images {
display: flex;
width: 80%;
position: relative !important;
margin: 2px;
}
#imageContainer img {
display: inline-block;
position: relative;
margin: 1px;
}
<div id="imageContainer">
<div id="images">
<img src="https://dummyimage.com/400x100/000/fff" alt="">
<img src="https://dummyimage.com/320x100/000/fff" alt="">
<img src="https://dummyimage.com/420x100/000/fff" alt="">
<img src="https://dummyimage.com/540x100/000/fff" alt="">
</div>
</div>
I would like for all of the images to scale to fit within my div, filling it, but I can't seem to find where I can do this with multiple images.
I question is basically this one but with a twist of also scaling to fit.
Unless you want a gap in your box you should remove width/position from the inner #images container. To make the images scale down you can add a min-width. If you want the images to not distort add an object-fit:
#imageContainer {
width: 80%;
border: 1px solid blue;
position: relative;
left: 50%;
transform: translateX(-50%);
}
#images {
display: flex;
margin: 2px;
}
#imageContainer img {
display: inline-block;
position: relative;
margin: 1px;
/* Important bits: */
min-width: 0;
object-fit: contain;
}
<div id="imageContainer">
<div id="images">
<img src="https://dummyimage.com/400x100/000/fff" alt="">
<img src="https://dummyimage.com/320x100/000/fff" alt="">
<img src="https://dummyimage.com/420x100/000/fff" alt="">
<img src="https://dummyimage.com/540x100/000/fff" alt="">
</div>
</div>
(Btw, centering using left + transform can cause blurriness in some rendering engines.)
I prefer using Bootstrap for most of my front-end styling as they provide lots of nifty "features" that make it easy for me to create a nice looking front-end without having to spend hours with CSS trying to get it looking perfect or making it scalable to multiple viewports.
Hence, here is how I would solve it using Bootstrap-4. (Here is a Codepen link)
<div class="container">
<div class="row outline-primary">
<div class="col">
<img src="https://dummyimage.com/400x100/000/fff" class="img-fluid h-100">
</div>
<div class="col">
<img src="https://dummyimage.com/320x100/000/fff" class="img-fluid h-100">
</div>
<div class="col">
<img src="https://dummyimage.com/420x100/000/fff" class="img-fluid h-100">
</div>
<div class="col">
<img src="https://dummyimage.com/540x100/000/fff" class="img-fluid h-100">
</div>
</div>
</div>
I realize this has probably been asked 10000 times at this point, but I can't for the life of me figure out why it isn't working for me...
As the title says, i have a "background" image that i want to place text/links on top of, below is my code:
CSS
.2020-main {
position: relative;
}
.2020-dg-cta {
position: absolute;
top: 100px;
left: 75px;
}
HTML
<div class="2020-main">
<img src="{{media url="wysiwyg/media/newfor2020/main-bg.jpg"}}" alt="" />
<div class="2020-dg-cta">
<div class="2020-cta-brand">Dreamgirl</div>
<div class="2020-cta-name">Main Collection</div>
<div class="2020-cta-button"><a href="" >Shop Collection</div>
</div>
</div>
From my understanding, you give the containing div (2020-main) position: relative; and the child div (2020-dg-cta) position: absolute;, but this doesn't seem to work for me. .2020-main appears below the image, as it usually would without styling.
Any help would be highly appreciated
Thank you
CSS identifiers cannot start with a number. try renaming your classes like this
.main {
position: relative;
}
.dg-cta {
position: absolute;
top: 100px;
left: 75px;
}
<div class="main">
<img src="{{media url=" wysiwyg/media/newfor2020/main-bg.jpg "}}" alt="" />
<div class="dg-cta">
<div class="cta-brand">Dreamgirl</div>
<div class="cta-name">Main Collection</div>
<div class="cta-button">View Catalogue</div>
<div class="cta-button">Shop Collection</div>
</div>
</div>
You can use classes starting with numbers but you need to put the first number like this in the .css. Check this for more info.
.\32 020-main {
position: relative;
}
.\32 020-dg-cta {
position: absolute;
top: 100px;
left: 75px;
}
<div class="2020-main">
<img src="https://picsum.photos/200/300" alt="" />
<div class="2020-dg-cta">
<div class="2020-cta-brand">Dreamgirl</div>
<div class="2020-cta-name">Main Collection</div>
<div class="2020-cta-button"><a href="" >Shop Collection</div>
</div>
</div>
I have created 4 columns. Each column consisting of an image, where I want to place text over each image.
To achieve this, I obviously need to set the image as a background. I am aware that this can be achieve through CSS (which is what I am currently doing) but I would like to place the image as a background, within my HTML file. The reason; so that I can enter the relevant 'alt' text for SEO purposes.
How can I best achieve this?
Just put the img in the col container, set that element to position: relative; then use absolute positioning to put the text over the image.
* {margin:0;}
.col {
float: left;
width: 25%;
position: relative;
}
img {
display: block;
width: 100%;
}
.overlay {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%,-50%);
background: black;
color: white;
padding: 1em;
}
<div class="col">
<img src="http://kenwheeler.github.io/slick/img/fonz1.png">
<div class="overlay">
<h2>text</h2>
</div>
</div>
<div class="col">
<img src="http://kenwheeler.github.io/slick/img/fonz1.png">
<div class="overlay">
<h2>text</h2>
</div>
</div>
<div class="col">
<img src="http://kenwheeler.github.io/slick/img/fonz1.png">
<div class="overlay">
<h2>text</h2>
</div>
</div>
<div class="col">
<img src="http://kenwheeler.github.io/slick/img/fonz1.png">
<div class="overlay">
<h2>text</h2>
</div>
</div>
#img-as-background {
position: relative;
overflow: hidden;
}
#img-as-background .container {
height: 500px;
padding: 20px;
}
#img-as-background img {
position: absolute;
width: 100%;
top: 0;
bottom: 0;
z-index: -1;
}
<div id="img-as-background">
<img src="https://image.freepik.com/free-vector/modern-abstract-background_1048-1003.jpg" alt="" />
<div class="container">
Overflow text Overflow text Overflow text Overflow text Overflow text Overflow text Overflow text
</div>
</div>
I'm new to HTML and CSS. For one of my projects, I need to put 16 images into a 4x4 grid of tiles on a webpage. These tiles cannot have gaps between them, and they need to stretch to fill the browser from side to side. They also should only scroll vertically. We are only allowed to use JavaScript or JQuery so I can only use HTML and CSS.
I wrote 4 div elements, each represents a row; inside each div, a span element holds 4 images - that's how I made the 4x4 grid. A code snippet looks like this:
/* One row in a div*/
<div class="map">
<span>
<img src="map_images/1.png">
<img src="map_images/2.png">
<img src="map_images/3.png">
<img src="map_images/4.png">
</span>
</div>
I also wrote a navigation bar that should float above the background images in the upper right corner:
/* 4 div elements of 4 rows before this code*/
<div id="nav">
<div>Foo</div>
<div>Boo</div>
</div>
For the above code, my stylesheet looks like this:
.map{
margin:0;
padding:0;
}
#nav {
position: absolute;
top: 0;
right: 0;
z-index: 10;
}
However, I've encountered several problems at this point.
First, I still have column gaps and row gaps between all 16 images. No matter what values I set map margin and padding to, nothing changes. I even tried negative values, still nothing changed. Can someone tell me how to go about this problem, eliminating all gaps?
Secondly, I googled and learned that z-index can be used to make div float above background; however, this is no working here and it seems that div #nav stays in the upper right corner as a separate div that does take up space, instead of floating above. Any suggestions on this?
Float left and set the width to 25%. Also I show below how to create a floating menu using the :hover pseudo-class.
.map div img {
width: 25%;
float:left;
display: inline-block;
}
#nav {
width: 50px;
background-color: grey;
}
#nav ul {
margin: 0;
padding: 0;
width: 50px;
background-color: grey;
position: absolute;
display:none;
}
#nav:hover ul, #nav ul:hover {
display:block;
}
<div id="nav">
Menu
<ul>
<li>Foo</li>
<li>Boo</li>
</ul>
</div>
<div class="map">
<div class="row">
<img src="http://lorempixel.com/100/100/">
<img src="http://lorempixel.com/100/100/">
<img src="http://lorempixel.com/100/100/">
<img src="http://lorempixel.com/100/100/">
</div>
<div class="row">
<img src="http://lorempixel.com/100/100/">
<img src="http://lorempixel.com/100/100/">
<img src="http://lorempixel.com/100/100/">
<img src="http://lorempixel.com/100/100/">
</div>
<div class="row">
<img src="http://lorempixel.com/100/100/">
<img src="http://lorempixel.com/100/100/">
<img src="http://lorempixel.com/100/100/">
<img src="http://lorempixel.com/100/100/">
</div>
<div class="row">
<img src="http://lorempixel.com/100/100/">
<img src="http://lorempixel.com/100/100/">
<img src="http://lorempixel.com/100/100/">
<img src="http://lorempixel.com/100/100/">
</div>
</div>
I think you are looking for something like this? See fiddle http://jsfiddle.net/DIRTY_SMITH/q12bh4se/4/
Snippet :
body {
margin: 0px;
}
div {
width: 50%;
float: left;
}
img {
width: 50%;
float: left;
}
.top-left {
z-index: 9999;
position: absolute;
top: 0;
left: 0;
color: white;
}
.top-right {
z-index: 9999;
position: absolute;
top: 0;
right: 0;
color: white;
}
<h1 class="top-left">Top Left</h1>
<h1 class="top-right">Top Right</h1>
<div class="row-1-col-1">
<img src="http://lorempixel.com/g/200/200/">
<img src="http://lorempixel.com/200/200/sports/">
<img src="http://lorempixel.com/200/200/sports/1/">
<img src="http://lorempixel.com/200/200/sports/Dummy-Text/">
</div>
<div class="row-1-col-2">
<img src="http://lorempixel.com/g/200/200/">
<img src="http://lorempixel.com/200/200/sports/">
<img src="http://lorempixel.com/200/200/sports/1/">
<img src="http://lorempixel.com/200/200/sports/Dummy-Text/">
</div>
<div class="row-2-col-3">
<img src="http://lorempixel.com/g/200/200/">
<img src="http://lorempixel.com/200/200/sports/">
<img src="http://lorempixel.com/200/200/sports/1/">
<img src="http://lorempixel.com/200/200/sports/Dummy-Text/">
</div>
<div class="row-3-col-3">
<img src="http://lorempixel.com/g/200/200/">
<img src="http://lorempixel.com/200/200/sports/">
<img src="http://lorempixel.com/200/200/sports/1/">
<img src="http://lorempixel.com/200/200/sports/Dummy-Text/">
</div>
All I had to do was set float: left and width: 25% on the images in CSS
.map img{
float: left;
width: 25%;
}
DEMO