I have 2 images, I have to display one image on the other image.I need to display the 2 images like below exactly.
The following is the code which I have tried, its not coming prperly.can any one please help me to fis this issue?
.my_banner{
background-image: url('http://i.stack.imgur.com/E4s7Z.gif');
background-repeat: no-repeat;
position:absolute;
top: 0px;
left: 150px;
width: 100%;
height: 100%;
z-index: 100;
}
<div>
<img class="my_banner"></img>
<img src="http://i.stack.imgur.com/rQ8Ku.jpg" width="100%" height="100%"></img>
</div>
You may use position: absoulute; and adjust the top and left to fit it.
.block {
position: relative;
}
.overlap {
position: absolute;
width: auto;
height: 60%;
top: 15%;
left: 13%;
z-index: 100;
}
<div class="block">
<img src="http://i.stack.imgur.com/rQ8Ku.jpg" width="100%" height="100%" />
<img class="overlap" src="http://i.stack.imgur.com/E4s7Z.gif" />
</div>
Try this https://jsfiddle.net/2Lzo9vfc/8/
HTML
<div class="banner">
<img src='http://i.stack.imgur.com/E4s7Z.gif' alt="">
</div>
CSS
.banner {
background: url('http://i.stack.imgur.com/rQ8Ku.jpg');
background-size: 100% auto;
background-position: top center;
position: relative;
background-repeat: no-repeat;
height: 200px;
}
.banner img {
left: 12%;
position: absolute;
width: 12%;
}
Related
I am trying to create a slideshow embedded inside a smartphone image for my website in the below URL link but the images are not fitted accurately.
so please help out to solve this issue
images inside the slider not fitted into the smartphone screen i.e width and height, can we make the images scroll inside the smartphone accurately display
url link of website
.dm-width {
width: 350px;
margin: 75px;
}
.iphone-mockup {
position: relative;
z-index: 5;
}
.dm-device {
position: relative;
width: 100%;
padding-bottom:203.477897%;
margin-bottom: 20px;
}
.device {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 100%;
-webkit-background-size: 100% 100%;
background-repeat: no-repeat;
background-image: url(https://res.cloudinary.com/di5yipnns/image/upload/v1482236588/apple-iphone_aivldo.png);
background-size: cover;
background-position: center center;
}
.screen {
overflow: hidden;
position: absolute;
top: 18.1%;
bottom: 20.6%;
left: 12.49%;
right: 17.4%;
background-color: #E91E63;
}
.slider {
height: 100%;
}
.slider div {
height: 119%;
padding: 30px;
}
.slider__item {
font-size: 100px;
color: rgba(255,255,255,0.7);
display: flex;
justify-content: center;
align-items: center;
}
.slider__item--2 {
background-color: #2196F3;
}
.slider__item--3 {
background-color: #4CAF50;
}
.slider__item--4 {
background-color: #FFC107;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.js'></script>
<div class="dm-width">
<div class="dm-device">
<div class="device">
<div class="screen">
<div class="slider">
<div class="slider__item slider__item--1">
<img src="inc/img/new_2.jpg" alt="app download" >
</div>
<div class="slider__item slider__item--2">
<img src="inc/img/new_1.jpg" alt="app download" >
</div>
<div class="slider__item slider__item--3">
<img src="inc/img/new_3.jpg" alt="app download" >
</div>
<div class="slider__item slider__item--4">
<img src="inc/img/new_4.jpg" alt="app download" >
</div>
</div>
</div>
</div>
</div>
</div>
I need only the first and last card in this set of cards to be horizontally centered. Each card's height is set to be 70%, so the width is responsive... if the width was a fixed percentage I could simply calculate what the margin-left should be to center the first card and calculate what the margin-right should be to center the last card, but the width is responsive and not fixed... any workaround for this?
Currently I've just made a guess and eyeballed what center would be by using margin-left and margin-right, but they are obviously not correct on all viewports. I need them perfect.
Maybe this requires JS? Really looking for a css solution though.
TO CLARIFY I am not looking to horizontally center all of the cards. I am only looking for the first and last card to be horizontally centered. The cards between the two are simply positioned inline relative to where the first card starts. A little tricky to explain, so here (https://jsfiddle.net/g5avo673/) is a JSFiddle demonstrating exactly what I mean. It is easily accomplished here because the widths are defined so I'm able to calculate what the margins need to be to center the first and last card, the issue with my code is that the widths are not defined, only the height, so I'm unable to calculate what the margins need to be when the widths are responsive.
JSFiddle:
https://jsfiddle.net/yn93phse/
Code:
<div id="horizontalproductcontainer">
<div id="scrolling-wrapper">
<div class="productcardfirst">
<img src="images/.JPG" alt="." class="productimage1" />
</div>
<div class="productcard">
<img src="images/.JPG" alt="." class="productimage1" />
</div>
<div class="productcard">
<img src="images/.JPG" alt="." class="productimage1" />
</div>
<div class="productcard">
<img src="images/.JPG" alt="." class="productimage1" />
</div>
<div class="productcardlast">
<img src="images/.jpeg" alt="." class="productimage1" />
</div>
</div>
</div>
#horizontalproductcontainer {
z-index: 0;
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
}
#scrolling-wrapper {
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
text-align: center;
margin: 0 auto;
height: 100%;
width: 100%;
-webkit-overflow-scrolling: touch;
-ms-overflow-style: none;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.productcardfirst {
display: inline-block;
position: relative;
height: 70%;
top: 50%;
transform: translateY(-50%);
margin-left: 30%;
padding-right: 3%;
}
.productcard {
display: inline-block;
position: relative;
height: 70%;
top: 50%;
transform: translateY(-50%);
padding-right: 3%;
}
.productcardlast {
display: inline-block;
position: relative;
height: 70%;
top: 50%;
transform: translateY(-50%);
margin-right: 30%;
}
.productcard img,
.productcardfirst img,
.productcardlast img {
height: 100%;
}
You can simplify your CSS by grouping common attributes as below and remove productFirst and productLast classes (you can keep them if you want to add extra styling), then make every product 100% width.
Given the above, all you need to do is to apply a left coordinate of 30% to all products (works for any number of elements):
#horizontalproductcontainer {
z-index: 0;
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
width: 100%;
height: 100%;
}
#scrolling-wrapper {
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
height: inherit;
-webkit-overflow-scrolling: touch;
}
.productcard {
display: inline-block;
position: relative;
top: 25%;
left: 30%;
height: 40%;
width: 100%;
/* padding: 3%; */
}
.productcard img {
width: 40%;
}
<div id="horizontalproductcontainer">
<div id="scrolling-wrapper">
<div class="productcard">
<img src="https://cdn.mos.cms.futurecdn.net/QjuZKXnkLQgsYsL98uhL9X-650-80.jpg" alt="." class="productimage1" />
</div>
<div class="productcard">
<img src="https://cdn.mos.cms.futurecdn.net/QjuZKXnkLQgsYsL98uhL9X-650-80.jpg" alt="." class="productimage1" />
</div>
<div class="productcard">
<img src="https://cdn.mos.cms.futurecdn.net/QjuZKXnkLQgsYsL98uhL9X-650-80.jpg" alt="." class="productimage1" />
</div>
<div class="productcard">
<img src="https://cdn.mos.cms.futurecdn.net/QjuZKXnkLQgsYsL98uhL9X-650-80.jpg" alt="." class="productimage1" />
</div>
</div>
</div>
I have found a workaround for this and hope that it will work for anyone else running into a similar issue:
To reiterate, I had a string of images that needed to have a height of exactly 70vh. This resulted in variable widths, which made horizontally centering the first and last image within the string impossible without using javascript. The method that worked for my case was to wrap each image inside a div that had a fixed width percentage. For images that are super wide, this will not work, but in my case, the images are all exactly squares. Using this method, I can keep all my images' height at exactly 70vh, while still centering the first and last images in the string.
JSFiddle demo: https://jsfiddle.net/8u4mbk17/
Code:
<div id="horizontalproductcontainer">
<div id="scrolling-wrapper">
<div class="productcardfirst">
<img src="images/.JPG" alt="." class="productimage1" />
</div>
<div class="productcard">
<img src="images/.JPG" alt="." class="productimage1" />
</div>
<div class="productcard">
<img src="images/.JPG" alt="." class="productimage1" />
</div>
<div class="productcard">
<img src="images/.JPG" alt="." class="productimage1" />
</div>
<div class="productcardlast">
<img src="images/.jpeg" alt="." class="productimage1" />
</div>
</div>
</div>
#horizontalproductcontainer {
z-index: 0;
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
}
#scrolling-wrapper {
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
text-align: center;
margin: 0 auto;
height: 100%;
width: 100%;
-webkit-overflow-scrolling: touch;
-ms-overflow-style: none;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.productcardfirst {
display: inline-block;
position: relative;
height: 70%;
width: 40%;
top: 50%;
transform: translateY(-50%);
margin-left: 30%;
}
.productcard {
display: inline-block;
position: relative;
height: 70%;
width: 40%;
top: 50%;
transform: translateY(-50%);
}
.productcardlast {
display: inline-block;
position: relative;
height: 70%;
width: 40%;
top: 50%;
transform: translateY(-50%);
margin-right: 30%;
}
.productcard img,
.productcardfirst img,
.productcardlast img {
height: 100%;
}
I'm trying to achieve the following:
I have an image in the background and a moving element in the foreground. I want to show the foreground element only while it's overlapping the background element. In the snippet below, the globe represents the background element, and the red square is the foreground element.
Here is a demonstration what I want it to look like:
The first things that came to mind were the css clip-path and mask-image properties, but I couldn't really get it to work.
Thanks in advance!
.world {
position: absolute;
top: 100px;
left: 100px;
}
.world img{
width: 300px;
height: auto;
}
.testelement {
width: 50px;
height: 50px;
background-color: red;
position: absolute;
left: 75px;
top: 200px;
}
<div class="world">
<img src="https://png2.kisspng.com/sh/bfd975773964bd26a28b9eecfb96b970/L0KzQYm3U8I6N5hwj5H0aYP2gLBuTgdwep1pRdl1b3LoPbTzigAuaaN5RddqcoTrPbTokwRwd58yTdNrZETkdom4VvU3QWczUKgBMEK2R4a4VcIzO2Y5UaUBMEm2SHB3jvc=/kisspng-world-globe-clip-art-earth-cartoon-5abd4af816e696.8660237515223549360938.png"/>
</div>
<div class="testelement">
</div>
Here is an idea with mask. Simply use the same image inside the mask on the container where the size is defined by the image. Then make the red square inside that container:
.world {
position: absolute;
top: 100px;
left: 100px;
width:300px;
-webkit-mask:url(https://i.ibb.co/2qmJjxR/kisspng-world-globe-clip-art-earth-cartoon-5abd4af816e696-8660237515223549360938.png)
center/contain no-repeat;
mask:url(https://i.ibb.co/2qmJjxR/kisspng-world-globe-clip-art-earth-cartoon-5abd4af816e696-8660237515223549360938.png)
center/contain no-repeat;
}
.world img{
width: 100%;
display:block;
}
.testelement {
width: 50px;
height: 50px;
background-color: red;
position: absolute;
left: -20px;
top: 150px;
transition:1s all;
}
.world:hover .testelement{
left:20px;
}
<div class="world">
<img src="https://i.ibb.co/2qmJjxR/kisspng-world-globe-clip-art-earth-cartoon-5abd4af816e696-8660237515223549360938.png">
<div class="testelement">
</div>
</div>
I'm trying to make solid markup and style for following XD layout
I added bootstrap for the full project but I'm confused about how I write markup and style for this layout with keep in mind responsiveness!
.hb-block-content-part {
position: relative;
width: 100%;
height: 100vh;
background-image: url("../images/bg-two.png");
background-size: cover;
background-position: center center;
}
.hb-block-content-part::before {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
width: 100%;
height: 100%;
background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 100%, rgba(0, 0, 0, 0) 100%);
}
.left-image {
position: relative;
}
.left-image .l-main-image {
float: right;
position: relative;
margin-left: 30%;
margin-top: 10%;
z-index: 2;
}
.left-image .l-overlay-image {
position: absolute;
left: -20%;
top: 20%;
z-index: 3;
}
.left-image .l-yellow-image {
position: absolute;
left: 10%;
top: 0;
z-index: 1;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="hb-block-content-part">
<div class="container-fluid px-10-percent">
<div class="hb-block-content">
<div class="left-image">
<div class="l-main-image">
<img class="img-fluid" src="https://i.imgur.com/JQl8Uyb.jpg" alt="">
</div>
<div class="l-overlay-image">
<img class="img-fluid" src="https://i.imgur.com/gBJ6kwB.jpg" alt="">
</div>
<div class="l-yellow-image">
<img class="img-fluid" src="https://i.imgur.com/rfk6tzn.jpg" alt="">
</div>
</div>
<div class="right-content">
</div>
</div>
</div>
</div>
Can you provide the mobile version of this design?
Bootstrap 4 has classes for positions and grids, make sure you check the documentation here: https://getbootstrap.com/docs/4.4/layout/overview/
You should work with flexbox or grid for a better result with responsive layouts.
See below links about:
Grid:
https://css-tricks.com/snippets/css/complete-guide-grid/
Flexbox:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
All the images that are not background images are not becoming responsive!
Tried max-width, images like the logo, mouse cursor are noot responsive
<header class=" bg-img bg-image-full">
<img class = "img-fluid"src="h_img.jpg">
</header>
<div class="container-fluid">
<img class="logo" src="logo.png" >
</div>
<div class="hero-text">
<br>
<h1 style="font-size:49px">WELCOME</h1>
<h2>TO DELANI STUDIOS</h2>
<h5>Amazing people are making amazing designs</h5>
</div>
<div>
<img class="mouse" src="mouse_click.png">
</div>
This is the css
.bg-img {
background-image: url("hero.jpg");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
margin-bottom: 500px;
max-width: 100%;
}
.logo {
position: relative;
margin-top: -2100px;
margin-left: 630px;
max-width: 5%;
height: auto !important;
}
.mouse {
position: relative;
margin-top: -1200px;
margin-left: 670px;
max-width: 100%;
height: auto !important;
}
Images to be responsive
Check object-fit property for images: https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit. However, note that it's not supported by some older browsers.
Try using:
img {
max-width: 100%;
height: auto;
}