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>
Related
I have three images. I want to combine them
I am referring to this link
https://www.w3schools.com/css/css_positioning.asp#:~:text=An%20element%20with%20position%3A%20absolute,moves%20along%20with%20page%20scrolling.
I am trying to achieve this three combine images
I tried static and relative position but they did not work
.object-left, .main-image {
position: absolute;
}
.object-right , .main-image{
position: absolute; //here I am using comma but not work
}
.cshtml
.object-left,
.main-image .object-right {
position: absolute;
}
<div class="container-fluid">
<div class="col-md-4 image">
<img class="object-left" src="~/Graphics/Services Page/obj1.svg" style="width:50px;height:50px;" /> //1 image
<img class="main-image" src="~/Graphics/Services Page/Mobile app developement.svg" /> //2 image
<img class="object-right" src="~/Graphics/Services Page/obj2.svg" style="width:50px;height:50px;" /> //3 image
</div>
<div class="col-md-6" style="margin-top:100px;">
<h2>Content</h2>
<p class="description">asd</p>
</div>
</div>
The problem is that when you use absolute positioning, the objects start at the upper-left corner of the parent (i.e. location 0x0), so all your three images appear on top of each other. All you need to do is tell them where they should be by adding the left property. The first image can stay at left=0, so you don't need to do anything. The second image must start at the width of the first image, left=50px in my example below. The third image must start at the total width of the fist and second image, left=100px in my example below.
Also remember that since you used absolute positioning on all three images and the parent doesn't have any other content, it will collapse. So you need to give it the height of the tallest image.
.object-left {
position: absolute;
}
.main-image {
position: absolute;
left: 50px;
}
.object-right {
position: absolute;
left: 100px;
}
.image {
height: 100px;
}
<div class="container-fluid">
<div class="col-md-4 image">
<img class="object-left" src="http://placehold.it/50x50" />
<img class="main-image" src="http://placehold.it/50x100" />
<img class="object-right" src="http://placehold.it/50x50" />
</div>
<div class="col-md-6">
<h2>Content</h2>
<p class="description">asd</p>
</div>
</div>
Note: in the example above, all images are placed at the top of the parent by default. If you want some images to start at a different location, then give it a top property. In the example below, I gave the third image a top=50px property to align it with the bottom of the second image:
.object-left {
position: absolute;
top: 0;
}
.main-image {
position: absolute;
left: 50px;
top: 0;
}
.object-right {
position: absolute;
left: 100px;
top: 50px;
}
.image {
height: 100px;
}
<div class="container-fluid">
<div class="col-md-4 image">
<img class="object-left" src="http://placehold.it/50x50" />
<img class="main-image" src="http://placehold.it/50x100" />
<img class="object-right" src="http://placehold.it/50x50" />
</div>
<div class="col-md-6">
<h2>Content</h2>
<p class="description">asd</p>
</div>
</div>
I think this is what you want to do. I would remove the inline style on the object- images and put that in the css. I left the top, left, right on .object- empty so that you can put where you want to place them.
Does this make sense?
.image {
position: relative;
}
.object-left {
position: absolute;
top: ;
left: ;
}
.main-image {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.object-right {
position: absolute;
top: ;
right: ;
}
<div class="image">
<div class="object-left"></div>
<div class="main-image"></div>
<div class="object-right"></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 am trying to achieve facebook alike image cover as follow, but unable to achieve desire effect. This is the css that i have try. As you all can see, the div content does not position correctly.
.profile {
position: relative;
}
.profile-cover img{
width: 100%;
}
.profile-photo {
position: absolute;
left: 20px;
bottom: -60px;
}
.profile-info {
padding-right: 120px;
}
<div class="profile">
<div class="profile-cover">
<img src="http://dummyimage.com/1200x300/000/fff" />
</div>
<div class="profile-details">
<div class="profile-photo">
<img src="http://dummyimage.com/100x100/eee/000" />
</div>
<div class="profile-info">
Profile info here
</div>
</div>
</div>
<div>
Remaining content here
</div>
I am not exactly sure if you wanted this because you just say the "the div content does not position correctly", but I'm quiet sure it's that.
So, if not, tell me.
Using the absolute positioning gets out of the flow the element. So, the next ones continues as if this element didn't exist. That's why the others were showing under this absolute element.
For next time, please precise which DIV by using its id, a class name or anything that we can know for sure the one you are talking about.
.profile {
position: relative;
}
.profile-cover img{
width: 100%;
}
.profile-photo {
display: inline-block;
margin-top: -60px;
margin-left: 20px;
}
.profile-info {
display: inline-block;
padding-right: 120px;
}
<div class="profile">
<div class="profile-cover">
<img src="http://dummyimage.com/1200x300/000/fff" />
</div>
<div class="profile-details">
<div class="profile-photo">
<img src="http://dummyimage.com/100x100/eee/000" />
</div>
<div class="profile-info">
Profile info here
</div>
</div>
</div>
<div>
Remaining content here
</div>
This is how I would do it ...
.profile {
margin-bottom: 15px;
}
.profile-cover img {
width: 100%;
}
.profile-photo {
display: inline-block;
margin-left: 20px;
margin-top: -24px;
}
.profile-info {
display: inline-block;
position: relative;
top: -25px;
left: 10px;
}
<div class="profile">
<div class="profile-cover">
<img src="http://dummyimage.com/1200x300/000/fff" />
</div>
<div class="profile-details">
<div class="profile-photo">
<img src="http://dummyimage.com/100x100/eee/000" />
</div>
<div class="profile-info">
Profile info here<br>
More info here
</div>
</div>
</div>
<div>
Remaining content here
</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
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.