I'm learning HTML & CSS so I'm trying to copycat Coder Manual.
I made a div for the background (I'll just use one color for now) and another div for the content of that first blue section with the logo, navigation, etc..
However, I can't make the content div overlay the background div without using something like:
#content {
position: absolute;
top: 0;
}
but that prevents me from centering the content div using:
#content {
width: 50%;
margin: 0 auto;
}
What should I do in such situation?
Edit: here's the html:
<!DOCTYPE html>
<html>
<head>
<title>CM</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="content">
<img alt="Coder Manual" src="https://codermanual.com/wp-content/uploads/2015/01/logo.png">
</div>
<div id="blue-div">
</div>
</body>
</html>
You can use transform to center it like this:
1-With position: absolute in an element with a known width
.center{
height: 40px;
padding: 20px 0;
background: #ddd;
position: relative;
}
.center img{
position: absolute;
left: 50%;
margin-left: -20px; /*the half width */
}
<div class="center">
<img src="http://i.stack.imgur.com/gijdH.jpg?s=328&g=1" width="40px" height="40px" alt="LOGO">
</div>
2- With position: absolute in an element with an unknown width
.center{
height: 40px;
padding: 20px 0;
background: #ddd;
position: relative;
}
.center img{
position: absolute;
left: 50%;
transform: translateX(-50%);
-webkit-transform: translateX(-50%);
}
<div class="center">
<img src="http://i.stack.imgur.com/gijdH.jpg?s=328&g=1" width="40px" height="40px" alt="LOGO">
</div>
3- Centering even vertically
.center{
height: 80px;
background: #ddd;
position: relative;
}
.center img{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
}
<div class="center">
<img src="http://i.stack.imgur.com/gijdH.jpg?s=328&g=1" width="40px" height="40px" alt="LOGO">
</div>
Personally, I do something like this:
.bg {
width: 100%;
}
.bg-blue {
background-color: blue;
}
.content {
text-align: center;
}
<div class="bg bg-blue">
<div class="content">
<img alt="Coder Manual" src="https://codermanual.com/wp-content/uploads/2015/01/logo.png">
</div>
</div>
but if you need to keep the divs seperate:
#BgBlue {
position: absolute;
top: 0;
z-index: -1;
height: 50px;
width: 100%;
background-color: blue;
}
.content {
text-align: center;
}
<div id="BgBlue">
</div>
<div class="content">
<img alt="Coder Manual" src="https://codermanual.com/wp-content/uploads/2015/01/logo.png">
</div>
Related
I am make a banner with Bootstrap 3, but having problems keeping the aspect ratio on the banner image.
When I see the image on small viewports, the image is getting squeezed. Can anybody help me with a solution on this?
<link rel="stylesheet" href="https://use.typekit.net/nai6cyj.css">
<style>
/**** Banner ****/
.image-wrap {
position: relative;
width: 100%;
height: 100vh;
overflow-x: hidden;
}
.banner-content {
position: absolute;
z-index: 99999;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 80%;
text-align: center;
font-size: 1.5em;
color: #fff;
line-height: 1.5;
}
.img-content img {
width: 100%;
height: 80vh;
display: block;
}
</style>
<!-- Banner -->
<div class="image-wrap">
<div class="img-content">
<img src="https://www.bmw.dk/content/dam/bmw/marketNORDICS/common/All-models/BMW-i/i4/2021/BMW_G26_BEV_i4_Stage-front_2_1680x756.jpg.asset.1621330813802.jpg" alt="">
</div>
<div class="overlay"></div>
</div>
<div class="banner-content">
<h1>MAKE THE BEST OF YOUR HTML EXPERIENCE WITH YOUR DAILY LIFE</h1>
</div>
You could use object-fit: cover to have your image fill your available space while maintaining its aspect ratio. You would need to put the 80vh value on the image container.
.image-wrap {
position: relative;
width: 100%;
height: 100vh;
overflow-x: hidden;
}
.banner-content {
position: absolute;
z-index: 99999;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 80%;
text-align: center;
font-size: 1.5em;
color: #fff;
line-height: 1.5;
}
.img-content {
height: 80vh;
}
.img-content img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: 50% 50%;
display: block;
}
<!-- Banner -->
<div class="image-wrap">
<div class="img-content">
<img src="https://www.bmw.dk/content/dam/bmw/marketNORDICS/common/All-models/BMW-i/i4/2021/BMW_G26_BEV_i4_Stage-front_2_1680x756.jpg.asset.1621330813802.jpg" alt="">
</div>
<div class="overlay"></div>
</div>
<div class="banner-content">
<h1>MAKE THE BEST OF YOUR HTML EXPERIENCE WITH YOUR DAILY LIFE</h1>
</div>
You may want to adjust the banner-content so it lines up better on small screens.
When you set your width and height (by relative) together, you force the image size to change together with your screen. For your text to be not aligned in the centre, is due to your text should be within the same division as your image so that they are able to refer to the same initial point when positioning.
<link rel="stylesheet" href="https://use.typekit.net/nai6cyj.css">
<style>
/**** Banner ****/
.image-wrap {
position: relative;
width: 100%;
overflow-x: hidden;
}
.banner-content {
position: absolute;
z-index: 99999;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 80%;
text-align: center;
font-size: 1.5em;
color: #fff;
line-height: 1.5;
}
.img-content > img {
width: 100%;
display: block;
}
</style>
<!-- Banner -->
<div class="image-wrap">
<div class="img-content">
<img src="https://www.bmw.dk/content/dam/bmw/marketNORDICS/common/All-models/BMW-i/i4/2021/BMW_G26_BEV_i4_Stage-front_2_1680x756.jpg.asset.1621330813802.jpg" alt="">
</div>
<div class="overlay"></div>
<div class="banner-content">
<h1>MAKE THE BEST OF YOUR HTML EXPERIENCE WITH YOUR DAILY LIFE</h1>
</div>
</div>
I'm trying to add a Logo on top of an Image. I tried to overlap these two images but it did work for me.
The second image was placed next to the first image instead. Please help me sort this thing out
This is for a website I'm trying to work on using HTML and CSS.
HTML file:
<section id="home">
<div class="backgroung" >
<img src="Images/banner1.jpg" style="width: 100%" class="bg">
<img src="Images/yellow.png" class="logo">
</div>
</section>
CSS file:
#home{
position: relative;
top: 0;
bottom: 0;
}
.bg {
position: relative;
top: 0;
bottom: 0;
z-index: 1;
}
.logo{
position: absolute;
top: 20px;
bottom: 30px;
height: 250px;
width: auto;
z-index: 2;
}
I expected this to be overlapping with each other.
I hope it's not because both images are not of the same file types.
You should also set the left property of the logo:
.background {
display: inline-block;
position: relative;
}
.logo {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 2;
}
<section id="home">
<div class="background">
<img src="https://picsum.photos/id/583/300/300" class="bg">
<img src="https://picsum.photos/id/237/100/100" class="logo">
</div>
</section>
You can also use multiple background images:
.background {
width: 300px;
height: 300px;
background:
url(https://picsum.photos/id/237/100/100) no-repeat center,
url(https://picsum.photos/id/583/300/300);
}
<section id="home">
<div class="background">
</div>
</section>
I have an image as a navigation bar that I wanted centered on the page. It has a fixed position which may be making it so it can't be centered.
HTML & CSS:
.navbar {
display: block;
position: fixed;
top: 0;
text-align: center;
}
<img src="Images/NavBar.png" alt="" class="navbar" usemap="#navbar-map" />
I have tried center tags, text-align: center, and left: auto; right: auto. None work. What's going wrong?
try this with position fixed.
left:50%;
top:50%;
transform:translate(-50%,-50%);
-webkit-transform:translate(-50%,-50%);
-moz-transform:translate(-50%,-50%);
-ms-transform:translate(-50%,-50%);
You can set
.navbar {
display: block;
position: fixed;
left: 50%;
transform: translateX(-50%);
}
.navbar {
display: block;
position: fixed;
left: 50%;
transform: translateX(-50%);
}
<img src="https://i.pinimg.com/originals/44/cd/cb/44cdcb484a8febd81c1784cb11a96c7b.jpg" alt="" class="navbar" usemap="#navbar-map" />
Just place the image inside a container, adding the class directly on the image tag is not a very good idea for future stuff.
.navbar {
display: block;
top: 0;
text-align: center;
margin: 0 auto;
}
.navbar-container {
position: fixed;
left: 0;
right: 0;
background: #ddd;
height: 300px;
}
<div class="navbar-container">
<img src="http://placekitten.com/200/300" alt="" class="navbar" usemap="#navbar-map" />
</div>
Or use the transformation
.navbar {
left: 50%;
transform: translateX(-50%);
position: fixed;
}
<img src="http://placekitten.com/200/300" alt="" class="navbar" usemap="#navbar-map" />
I am centering an image in the following code but as I center it the background fades.I have managed to put the image in the center but with the background color. How to fix this ? Please do tell how to position image as well?
HTML
<section id="contact">
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-10 col-md-5 centered">
<img src="something.jpg" alt="">
</div>
</div>
</div>
</section>
CSS
#contact
{
background-color:black;
}
.container
{
text-align: center;
position:absolute;
margin:0;
padding:0;
top:50%;
left:50%;
transform: translate3d(-50%, -50%,0);
}
#contact .centered
{
float:none;
margin:0 auto;
}
#contact img
{
border-radius:50%;
border: 4px solid #fff;
}
If you give outer position absolute and container position relative , it can help you and for left, top 50% values, make them in the outer div because you put them one within the other
#contact{
background-color: black;
position: absolute;
top: 50%;
left: 50%;
}
.container
{
text-align: center;
position: relative;
margin: 0;
padding: 0;
top: 50%;
/* left: 50%; */
/* transform: translate3d(-50%, -50%,0); */
}
https://jsfiddle.net/hemnathmouli/jp7gydwf/
Try this.
<div class = "image">
<img src = "http://www.mountainguides.com/photos/everest-south/c2_2011b.jpg" alt="myimage">
<span class = "caption">
Hello World.!
</span>
</div>
Css:
.image{
position: relative;
text-align: center;
display: table;
}
.caption{
position: absolute;
background: black;
padding: 10px;
color: white;
width: 100px;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
This will work transform: translate(-50%, -50%);
I have the following code: JSFiddle
HTML:
<div class="profile-image">
<img src="image.png" />
</div>
CSS:
.profile-image img {
width: 48px;
height: 48px;
position: absolute;
left: 12px;
top: 12px;
border-radius: 500px;
display: block;
}
The image tag in the HTML must be there.
How can I make it so that when you hover over the image in the image tags, it shows another image over top of it?
You can show another div on hover of parent div.
.imageBox:hover .hoverImg {
display: block;
}
.imageBox {
position: relative;
float: left;
}
.imageBox .hoverImg {
position: absolute;
left: 0;
top: 0;
display: none;
}
.imageBox:hover .hoverImg {
display: block;
}
<div class="imageBox">
<div class="imageInn">
<img src="http://3.bp.blogspot.com/_X62nO_2U7lI/TLXWTYY4jJI/AAAAAAAAAOA/ZATU2XJEedI/s1600/profile-empty-head.gif" alt="Default Image">
</div>
<div class="hoverImg">
<img src="https://lh5.googleusercontent.com/-gRq6iatuNYA/AAAAAAAAAAI/AAAAAAAAANk/674knqRN1KI/photo.jpg" alt="Profile Image">
</div>
</div>
Try something like this
<div class="profile-image">
<img src="image.png" />
<div class="image_hover_bg"></div>
</div>
<style>
.profile-image{
position: relative;}
.profile-image img {
width: 48px;
height: 48px;
border-radius: 500px;
display: block;
}
.image_hover_bg{
background: url("images/zoom_icon.png") no-repeat scroll center center rgba(0, 0, 0, 0);
height: 171px;
position: absolute;
top: 0;
width: 210px;
z-index: -1;
display:none;
}
.profile-image:hover .image_hover_bg{display:block}
</style>
Got it myself.
HTML:
<div class="profile-image">
<img src="assets/img/avatar.png" />
<span class="overlay"></span>
</div>
CSS added:
.profile-image:hover .overlay {
position:absolute;
width: 48px;
height: 48px;
z-index: 100;
background: transparent url('overlay_image.png') no-repeat;
cursor: pointer;
}
I got it myself to show an image in the center of another image on hover
HTML:
<html>
<head>
<link rel="stylesheet" href="index.css">
</head>
<div class="imageBox">
<div class="imageInn">
<img src="background.jpg" alt="Profile Image">
</div>
<div class="hoverImg center">
<img src="sign-check-icon.png" alt="default image">
</div>
</div>
</html>
CSS:
.imageBox {
position: relative;
float: left;
}
.imageBox .hoverImg {
position: absolute;
left: 350px;
top: 100px;
display: none;
}
.imageBox:hover .hoverImg {
display: block;
}
Note that left: 350px and top: 100px will be changed based on your background-image in my case background-image was 700x200(width x height). So in order to position the image to the center just take half of width and height.
.figure {
position: relative;
width: 360px;
max-width: 100%;
}
.figure img {
display: block;
max-width: 100%;
height: auto;
}
.figure .image-hover {
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
object-fit: contain;
opacity: 0;
transition: opacity .2s;
}
.figure:hover .image-hover {
opacity: 1;
}
<div class="figure">
<img class="image-main" src="https://demo.sirv.com/hc/Bose-700-a.jpg">
<img class="image-hover" src="https://demo.sirv.com/hc/Bose-700-b.jpg">
</div>