How to make effect behind the picture? Like you can see in the picture. and of course image have to be responsive.
one line solution:
img {
padding:20px;
background:linear-gradient(transparent 40px,red 0 calc(100% - 40px),transparent 0);
}
<img src="https://picsum.photos/300/300">
Can you please check the below code? Hope it will work for you. In this code, we have given position relative to the img-block and gave background color in it's pseudo-element with position absolute.
.img-block {
padding: 30px;
position: relative;
display: inline-block;
}
.img-block:before {
content: "";
display: block;
position: absolute;
width: 100%;
height: 75%;
background: #F9CDF1;
top: 50%;
left: 0px;
z-index: 1;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
}
.img-block img {
position: relative;
z-index: 2;
}
<div class="img-block">
<img src="https://via.placeholder.com/490x590.png" alt="image" />
</div>
You can recreate an effect like this by utilising absolute positioning with a relative parent.
body {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
.imageWrapper {
background: rebeccapurple;
width: 200px;
height: 200px;
position: relative;
margin: 16px;
}
.imageWrapper img {
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
<div class="imageWrapper">
<img src="https://unsplash.it/180/220" alt="">
</div>
Ignore the body styles, they are just to illustrate the point better in the preview. The .imageWrapper and .imageWrapper img are the things you want to pay attention to.
Related
I'd like to have an image with a div that covers the image exactly. I can get the div to overlay the image by using position: relative in the parent and position: absolute for the div, but background-color fills out the padding in the parent so they aren't overlayed properly.
Here's a snippet that demonstrates the problem.
.parent {
position: relative;
padding: 10px;
width: 40%;
}
.image {
width: 100%;
height: 100%;
border-radius: 13px;
}
.overlay {
position: absolute;
background-color: red;
width: 100%;
height: 100%;
border-radius: 13px;
left: 0;
top: 0;
opacity: 0.2;
}
<div class="parent">
<img class="image" src="https://cards.scryfall.io/normal/front/4/f/4f3deefe-28bc-4e45-a0a0-ab03167e2e81.jpg?1561942156">
<div class="overlay"></div>
</div>
I'm able to get it pretty close with some calc()'s to subtract the padding. This almost works, but the div fills out a little too much at the bottom. I'd like to not have a bunch of hardcoded values for padding anyway, so I wouldn't really like this solution even if it did work entirely.
Here's a snippet that shows the calc() approach.
.parent {
position: relative;
padding: 10px;
width: 40%;
}
.image {
width: 100%;
height: 100%;
border-radius: 13px;
}
.overlay {
position: absolute;
background-color: red;
width: calc(100% - 2 * 10px);
height: calc(100% - 2 * 10px);
border-radius: 13px;
left: 10px;
top: 10px;
opacity: 0.2;
}
<div class="parent">
<img class="image" src="https://cards.scryfall.io/normal/front/4/f/4f3deefe-28bc-4e45-a0a0-ab03167e2e81.jpg?1561942156">
<div class="overlay"></div>
</div>
This snippet does things a slightly different way, putting the img inside the overlay div and putting the actual green, lower opacity overlay as the overlay div's after pseudo element.
This way you don't have to build in any knowledge of the parent's padding.
.parent {
position: relative;
padding: 10px;
width: 40%;
background: red;
height: fit-content;
}
.image {
width: 100%;
border-radius: 13px;
top: 0;
left: 0;
}
.overlay {
position: relative;
padding: 0;
width: fit-content;
height: fit-content;
}
.overlay::after {
content: '';
position: absolute;
background-color: green;
width: 100%;
height: 100%;
border-radius: 13px;
left: 0;
top: 0;
opacity: 0.2;
padding: 0px;
}
<div class="parent">
<div class="overlay"> <img class="image" src="https://cards.scryfall.io/normal/front/4/f/4f3deefe-28bc-4e45-a0a0-ab03167e2e81.jpg?1561942156"></div>
</div>
When using HTML5, browser adds some padding to the bottom of the img tag. This can be avoided by making the image a block element. So just adding display: block to class .image and then it good.
And btw, to define witdh/height of an absolute element, beside calc() you can also define 4 values top, right, bottom, left of it.
:root {
--custom-padding: 10px;
}
.parent {
position: relative;
padding: var(--custom-padding);
width: 40%;
}
.image {
width: 100%;
height: 100%;
border-radius: 13px;
display: block;
}
.overlay {
position: absolute;
background-color: red;
border-radius: 13px;
bottom: var(--custom-padding);
right: var(--custom-padding);
left: var(--custom-padding);
top: var(--custom-padding);
opacity: 0.2;
}
<div class="parent">
<img class="image" src="https://cards.scryfall.io/normal/front/4/f/4f3deefe-28bc-4e45-a0a0-ab03167e2e81.jpg?1561942156">
<div class="overlay"></div>
</div>
I have some problems with an iframe centering.
The code is setup to keep the same ratio, so it is 100% reposonsive.
This also causes VERY LIMITED possibilies for adding formattiong and - Centering
I have tired to both add a container box, and changing the css styling but I cant seam to get it to work...
any idears
<div class="background background_video">
<div id="video_container">
<div class="youtube-video-container">
<iframe class="youtube-video" src="https://www.youtube.com/embed/8aGhZQkoFbQ"></iframe>
</div>
</div>
</div>
.youtube-video-container {
padding-top: 56.25%;
height: 0px;
position: relative;
}
.youtube-video {
width: 60%;
height: 60%;
position: absolute;
top: 0;
left: 0;
border: 0;
}
.youtube-video-container {
height: 300px; // some height
position: relative;
}
.youtube-video {
width: 60%;
height: 60%;
position: absolute;
bottom: 0;
left: 0;
border: 0;
display: block;
}
as I correct understand question
FROM ANOTHER POST I FOUND...
Thanks for the trying to help anyways guys!
Without knowing the width/height of the positioned1 element, it is still possible to align it as follows:
EXAMPLE HERE
.child {
position: absolute;
top: 50%; /* position the top edge of the element at the middle of the parent */
left: 50%; /* position the left edge of the element at the middle of the parent */
transform: translate(-50%, -50%); /* This is a shorthand of
translateX(-50%) and translateY(-50%) */
}
It's worth noting that CSS Transform is supported in IE9 and above. (Vendor prefixes omitted
In this responsive 16:9 youtube css, all parents of #video_container have to be set to an height 100%.
Click on Run code, then 'Full page' to see the result.
html, body {
height: 100%;
margin: 0;
}
.background_video {
height: 100%;
display: flex;
}
#video_container {
width: 60%;
margin: auto;
}
.youtube-video-container {
position: relative;
display: block;
width: 100%;
padding: 0;
overflow: hidden;
}
.youtube-video-container::before {
display: block;
content: "";
padding-top: 56.25%;
}
.youtube-video-container iframe {
position: absolute;
top: 0; bottom: 0; left: 0;
width: 100%;
height: 100%;
border: 0;
}
<div class="background background_video">
<div id="video_container">
<div class="youtube-video-container">
<iframe class="youtube-video" src="https://www.youtube.com/embed/8aGhZQkoFbQ"></iframe>
</div>
</div>
</div>
I have a single image (a checkmark) on the page and I want to fix its position when the user resizes the browser or go fullscreen.
As you can see here the image is moving around the page when I try to resize the browser:(image is the checkmark)
And when I resize the browser again:
The desired result is to fix the position of the image like that play button in the middle of the page that moves relative to the window.
Here is the CSS of the image:
Note: I need those viewport units for some complicated reason! and the absolute positioning is prefered.
#Image{
position: absolute;
max-width:10%;
height: auto;
opacity: 1;
top: 78vh;
left:26.5vw;
z-index: 1000;
}
<img id="Image" src="https://round-arm-authority.000webhostapp.com/test/Changed.png"/>
Update: using this seems to work fine but the image resizes Non-proportional:
#correctImage{
position: absolute;
transform: scale(0.2, 0.2);
height: 100vh;
width: 100vw;
opacity: 1;
z-index: 1000;
}
Update 2: Here is the link to download the zip files to test the code in the browser (Chrome is preferred). The HTML code to modify is in story_html5.html lines 22 - 27 and the CSS code is in correctImageStyle.css.
The desired behavior is just resizing and repositioning of the checkmark image like the play button in the center of the page.
http://s6.picofile.com/d/8381556034/1ef7bc07-eea8-4e9e-8bd8-57214a1e7ef8/Untitled1_Storyline_output.zip
Change the max-width: 10%; to width: 10%
#Image{
position: absolute;
width:10%;
height: auto;
opacity: 1;
top: 78vh;
left:26.5vw;
z-index: 1000;
}
<img id="Image" src="https://round-arm-authority.000webhostapp.com/test/Changed.png"/>
Maybe you should try to force your image to always be on the middle of the screen with:
#Image{
position: fixed;
top: 50%;
left: 50%;
transform: scale(0.2);
height: 100vh;
width: 100vw;
opacity: 1;
z-index: 1000;
}
<img id="Image" src="https://round-arm-authority.000webhostapp.com/test/Changed.png"/>
This should work
html,body,* {
margin: 0;
padding: 0;
box-sizing: border-box;
overflow: hidden;
}
.container {
position: relative;
display: flex;
justify-content:center;
align-items:center;
width: auto;
height: auto;
}
img.image {
width: 80%;
height: 250px;
display: block;
background: grey;
}
.logo {
height: 64px;
width: 64px;
position: absolute;
}
<div class="container">
<img class="image"/>
<img class="logo absolute" id="Image" src="https://round-arm-authority.000webhostapp.com/test/Changed.png"/>
</div>
With ::after
html,body,* {
margin: 0;
padding: 0;
box-sizing: border-box;
overflow: hidden;
}
img {
width: 80%;
height: 250px;
display: block;
background: grey;
}
.container {
position: relative;
display: flex;
justify-content: center;
align-items:center;
}
.container::after {
content: "";
background-image: url("https://round-arm-authority.000webhostapp.com/test/Changed.png");
background-position: center center;
background-size:contain;
background-repeat: no-repeat;
position: absolute;
height: 64px;
width: 64px;
z-index: 1;
}
<div class="container">
<img class="image"/>
</div>
I would like to create a css class so a div can be placed in the center of its parent. The code I am using is:
.centered {
position: absolute;
margin: auto;
bottom: 0px;
left: 0px;
top: 0px;
right: 0px;
}
It works if the parent is larger than the child element, or has the same size:
https://jsfiddle.net/cy8dn1km/
But if the child is larger, then its center is not positioned at the center of its parent. Instead their left borders will be at the same place, and the child element will be extended only to right:
https://jsfiddle.net/797L7nce/
Something is wrong with the horizontal centering.
How is it possible to fix it using CSS only (without using CSS 2D/3D transformations), without adding new container elements?
Add left: 50%; transform: translate(-50%, 0);and remove right: 0px;
.centered {
position: absolute;
margin: auto;
display: block;
bottom: 0px;
top: 0px;
left: 50%;
transform: translate(-50%, 0);
}
Demo
Here is a solution without using CSS 2D/3D transformations. You can use display: flex with flex-direction: column (this is important) on parent element and display: table on child element.
body,
html {
width: 100%;
height: 100%;
margin: 0;
}
body {
display: flex;
align-items: center;
justify-content: center;
background: green;
}
.centered.d1 {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.d1 {
background: yellow;
width: 50px;
height: 50px;
}
.d2 {
background: red;
opacity: 0.7;
width: 250px;
height: 250px;
display: table;
}
<div class="centered d1">
<div class="centered d2"></div>
</div>
If you know the dimentions of the elements you can use the left/top position at 50% with negative margins of half the element size.
I have updated your fiddle here: https://jsfiddle.net/797L7nce/2/
.centered {
position: absolute;
display: block;
left:50%;
top:50%;
}
.d1 {
background: yellow;
width: 50px;
height: 50px;
margin-left:-25px;
margin-top:-25px;
}
.d2 {
background: red;
opacity: 0.7;
width: 250px;
height: 250px;
margin-left:-125px;
margin-top:-125px;
}
Ok i tried without 2D CSS :
Change absoluteto fixed and add some margin: auto;
JSfiddle here
body, html {
width: 100%;
height: 100%;
}
body {
position: relative;
background: green;
}
.centered {
position: fixed;
margin: auto;
display: block;
bottom: 0px;
left: 0px;
top: 0px;
right: 0px;
}
.d1 {
background: yellow;
width: 50px;
height: 50px;
}
.d2 {
background: red;
opacity: 0.7;
width: 250px;
height: 250px;
}
<div class="centered d1">
<div class="centered d2">
</div>
</div>
You're almost there. Just set the absolute positions to the same (large) negative number, to make enough room for the auto margin:
.centered {
position: absolute;
margin: auto;
bottom: -9999px;
left: -9999px;
top: -9999px;
right: -9999px;
}
https://jsfiddle.net/797L7nce/9/
Adding the below CSS to .d2 will solve the issue.
.d2 {
background: red;
opacity: 0.7;
width: 250px;
height: 250px;
position:absolute;
left:50%;
margin-left:-125px;
}
You can check the demo here
In Bootstrap 4:
to center the child horizontally, use bootstrap-4 class:
justify-content-center
to center the child vertically, use bootstrap-4 class:
align-items-center
but remember don't forget to use d-flex class with these
it's a bootstrap-4 utility class, like so
<div class="d-flex justify-content-center align-items-center" style="height:100px;">
<span class="bg-primary">MIDDLE</span>
</div>
Note: make sure to add bootstrap-4 utilities if this code does not work
I know it's not the direct answer to this question but it may help someone
I'm using the vertical centering technique explained here on CSS-Tricks: http://css-tricks.com/centering-in-the-unknown
I have an image that needs to be vertically centered in a div. It seems to work just fine on every platform except mobile Safari/iOS, where the image is placed out of view. I can't seem to work out what the quirk or compliance issue is on mobile Safari that is causing this.
Here's the issue in a CodePen: http://codepen.io/anon/pen/iDalc
Here's my stripped down HTML and CSS
<div class="headline">
<div class="wrapper">
<a>
<div class="background">
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/1/1c/Durga%2C_Burdwan%2C_2011.JPG/1920px-Durga%2C_Burdwan%2C_2011.JPG">
</div>
</a>
</div>
</div>
<div class="headline">
<div class="wrapper">
<a>
<div class="background">
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/c/c1/Upper_Antelope_Canyon_Heart_Formation_2013.jpg/640px-Upper_Antelope_Canyon_Heart_Formation_2013.jpg">
</div>
</a>
</div>
</div>
<div class="headline">
<div class="wrapper">
<a>
<div class="background">
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/8/80/Maly_Krashokholmsky_bridge_4exp_Oloneo.jpg/1920px-Maly_Krashokholmsky_bridge_4exp_Oloneo.jpg">
</div>
</a>
</div>
</div>
And my CSS:
.headline {
background: gray;
padding: 0 3.125%;
width: 93.75%;
margin-left: auto;
margin-right: auto;
max-width: 768px;
}
.wrapper {
position: relative;
overflow: hidden;
min-height: 190px;
width: 100%;
margin-bottom: 2px;
}
.background {
position: absolute;
top: 0;
height: 100%; width: 100%;
z-index: 1;
background-color: #000;
text-align: center;
}
.background img {
width: 100%;
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.background:before {
content: "";
position: absolute;
z-index: 2;
top: 0;
left: 0;
display: block;
width: 100%;
height: 100%;
}
Can anyone advise what CSS issue is happening in mobile Safari? So far, I've diagnosed it may have something to do with the transform: translate-Y property. All mobile Safari testing done on device as well as iOS simulator.
Thanks in advance!
For anyone who comes across this in any searches, I managed to fix this on my own. Changed .background img to position: absolute; and left: 0;
I don't entirely understand what's going on but whatever it fixed it. I'd also like to add that I was mistaken in my original post. Somewhere I credited CSS Tricks for the vertical centering technique I implemented, which wasn't the actual source. I had referenced the following URL: http://davidwalsh.name/css-vertical-center
Updated CodePen: http://codepen.io/anon/pen/zJugd
.headline {
background: gray;
padding: 0 3.125%;
width: 93.75%;
margin-left: auto;
margin-right: auto;
max-width: 768px;
}
.wrapper {
position: relative;
overflow: hidden;
min-height: 190px;
width: 100%;
margin-bottom: 2px;
}
.background {
position: absolute;
top: 0;
height: 100%; width: 100%;
z-index: 1;
background-color: #000;
text-align: center;
}
.background img {
width: 100%;
position: absolute;
left: 0;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.background:before {
content: "";
position: absolute;
z-index: 2;
top: 0;
left: 0;
display: block;
width: 100%;
height: 100%;
}