http://codepen.io/pen/YZdpgb
The pseudo-element after is on front of the div .rotate.
It seems that the z-index: -1 is not working
HTML
<div class="box--container">
<div class="box--rotate">
<div class="box">
<p>my background should be the light grey :(</p>
</div>
</div>
</div>
CSS
body {
height: 80vh;
margin: 10vh 10vw;
}
.box--container {
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
text-align: center;
}
.box--rotate {
position: relative;
width: 250px;
height: 250px;
transform: rotate(45deg);
transform-origin: 100% 150%;
background: #ccc;
z-index: 1;
&::after {
position: absolute;
content: '';
width: 100%;
height: 100%;
background: #F2C398;
top: 15px;
left: 15px;
z-index: -1;
}
}
.box {
position: relative;
top: 50%;
transform: rotate(-45deg) translateY(-50%);
z-index: 10;
}
try this one it's helpful https://jsfiddle.net/x061nock/ ::after use default color
Related
I want to draw a line between an image, which has a certain width and height. Like Below:
This is what I have tried. With this approach, on window resize the line drawn for div and the actual image has displacement. I want it more responsive. Meaning as the window resizes I want to position the line and the image together seamlessly as though they are a single component.
<div class="car-left-container">
<img alt="" class="car-left" src="images/Car-Left3x.png">
</div>
<style type="text/css">
.car-left {
width: 100px;
height: 100px;
left: 30%;
position: absolute;
top: 80px;
transform: rotate(30deg);
}
.car-left-container {
position: relative
}
.car-left-container:after {
content: '';
position: absolute;
left: 0;
border-top: solid 0.5px #e6e8eb;
background: black;
width: 100%;
z-index: -1;
opacity: 0.5;
transform: rotate(-38deg);
top: 33px;
}
</style>
Any help and suggestions are appreciated.
Thanks
You can use a linear gradient, and change the angle. You can use the background position to move the line:
.car-left {
width: 100px;
height: 100px;
left: 30%;
position: absolute;
top: 80px;
transform: rotate(30deg);
}
.car-left-container {
width: 50vw;
height: 50vh;
border: 1px solid black;
background: linear-gradient(-25deg, transparent calc(50% - 1px), black 50%, transparent calc(50% + 1px)) no-repeat;
background-position: -10vw -10vh;
}
<div class="car-left-container">
<img alt="" class="car-left" src="images/Car-Left3x.png">
</div>
I am not sure what size and angle the line should be.
HTML:
<div class="car-left-container relative">
<img alt="" class="car-left" src="images/Car-Left3x.png">
</div>
CSS:
.car-left {
width: 100px;
height: 100px;
left: 30%;
position: absolute;
top: 80px;
}
.car-left-container {
position: relative;
width: 100px;
height: 100px;
transform: rotate(30deg);
}
.car-left-container:after {
content: '';
position: absolute;
left: -20px;
border-top: solid 0.5px #e6e8eb;
background: black;
width: 200%;
z-index: -1;
opacity: 0.5;
transform: rotate(90deg);
top: 113px;
}
I hope this will work for u.
<style type="text/css">
.car-left-container{
position: relative;
width: 100%;
height: 500px;
top: 0;
left: 0;
}
.car-left {
width: 100px;
height: 100px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%) rotate(30deg);
}
.car-left-container:after {
content: '';
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%) rotate(-38deg);
border-top: solid 0.5px #e6e8eb;
width: 100%;
z-index: -1;
opacity: 0.5;
}
</style>
<div class="car-left-container relative">
<img alt="" class="car-left" src="images/Car-Left3x.png">
</div>
This worked for me. I had to just remove position: absolute for car image.
CSS / HTML:
.car-left-container {
width: 100%;
display: flex;
align-items: start;
justify-content: center;
}
.car-left {
width: 100px;
height: 100px;
transform: rotate(30deg);
margin-left: -50px;
}
.car-left-container:after {
content: '';
position: absolute;
left: 0;
border-top: solid 0.5px #e6e8eb;
background: black;
width: 100%;
z-index: -1;
opacity: 0.5;
transform: rotate(-38deg);
top: 0;
}
<div class="car-left-container relative">
<img alt="" class="car-left" src="images/Car-Left3x.png">
</div>
I've making an image and a slide and everything seems to work the way I want it, but the left side reacts when I haven't even reached the image. I've played with if for a while but as it is I can't figure out why.
not to mention I can't find the words but I haven't worked on that part much.
.container {
position: relative;
width: 50%;
}
.image {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
bottom: 40px;
left: 225px;
right: -50%;
background-color: black;
overflow: hidden;
width: 137%;
height: 0%;
transition: .5s ease;
}
.container:hover .overlay {
height: 100%;
}
.text {
color: white;
font-size: 20px;
position: relative;
bottom: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}
.actives_center_image_1{
position: relative;
margin-left: 30%;
bottom: 40px;
display: block;
}
<div class="container">
<img src="https://cdn.vox-cdn.com/uploads/chorus_asset/file/16026669/got_lede_image.jpg" class="actives_center_image_1">
<div class="overlay">
<div class="text">Hello World</div>
</div>
</div>
you have defined the hover for the container and your image has left a margin. Either remover the margin or define hover for the image because of
.actives_center_image_1{
position: relative;
margin-left: 30%;
bottom: 40px;
display: block;
}
.
.container {
position: relative;
width: 50%;
}
.image {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
bottom: 40px;
left: 225px;
right: -50%;
background-color: black;
overflow: hidden;
width: 137%;
height: 0%;
transition: .5s ease;
}
.container:hover .overlay {
height: 100%;
}
.text {
color: white;
font-size: 20px;
position: relative;
bottom: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}
.actives_center_image_1{
position: relative;
bottom: 40px;
display: block;
}
<div class="container">
<img src="https://cdn.vox-cdn.com/uploads/chorus_asset/file/16026669/got_lede_image.jpg" class="actives_center_image_1">
<div class="overlay">
<div class="text">Hello World</div>
</div>
</div>
Or you can define another container and put it inside the main one and do the same thing.
I'm trying to put two lines (horizontal and vertical one) on top of an image via CSS.
here my code:
div {
width: 640px;
position: relative;
}
.verticalLine {
display: block;
position: absolute;
background-color: blue;
width: 3px;
top: 0px;
bottom: 0px;
left: 50%;
height: 480px;
}
.horizontalLine {
position: absolute;
width: 3px;
top: 0px;
bottom: 0;
left: 50%;
background-color: blue;
transform: rotate(90deg);
}
<div>
<span class="verticalLine"></span>
<span class="horizontalLine"></span>
<img src="http://placehold.it/640x480">
</div>
Unfortunately my result is:
How can I solve this?
thanks
You should add a height to the horizontal line equal to the image width, and then position it in the center with top:50% translateY(-50%).
And also you should add translateX(-50%) to both of them to make them stay in the exact center of the image.
See below
div {
width: 640px;
position: relative;
}
.verticalLine {
display: block;
position: absolute;
background-color: blue;
width: 3px;
top: 0px;
bottom: 0px;
left: 50%;
height: 480px;
transform: translateX(-50%)
}
.horizontalLine {
position: absolute;
width: 3px;
top: 50%;
bottom: 0;
left: 50%;
background-color: blue;
transform: translate(-50%, -50%) rotate(90deg);
height:640px;
}
<div>
<span class="verticalLine"></span>
<span class="horizontalLine"></span>
<img src="http://placehold.it/640x480">
</div>
I cannot figure out why my overlay class is not producing the opacity overlay on top of the image. When viewing this in with the developer tools open the overlay box looks as if it is only covering the bottom 5% (just over the word "solutions"), however the link works anywhere on the image.
Does anyone see why my overlay isn't covering the entire image?
.machInfo25 {
display: inline-block;
vertical-align: top;
height: 30vh;
position: relative;
box-sizing: border-box;
}
.overlay {
position: relative;
height: 100%;
width: 100%;
background-color: rgba(0,0,0,.5);
border: none;
z-index: 3;
}
.machInfo25 {
width: 25%;
}
.machInfo25 img {
width: 100%;
height: 100%;
object-fit: cover;
}
a .machineInfoTitle {
color: #FFF;
}
.total-center {
text-align: center;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 100%;
}
<div class="machInfo25">
<a class="overlay" href="solutions">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQqXxLsqFCFPx0l_3_h5sn-0JN2oU5GU-wGnHH3CbJLSMeywV6CLA" alt="View all">
<div class="total-center">
<span class="machInfoTitle">Solutions</span>
</div>
</a>
</div>
Add display: block; or display: inline-block to your overlay class. <a> elements are inline elements which size differently than block elements. The link is still working on the entire image since the image is a child of the link
.machInfo25 {
display: inline-block;
vertical-align: top;
height: 30vh;
position: relative;
box-sizing: border-box;
}
.overlay {
display: block;
position: relative;
height: 100%;
width: 100%;
background-color: rgba(0,0,0,.5);
border: none;
/*z-index: 3;*/
}
.machInfo25 {
width: 25%;
}
.machInfo25 img {
position: relative;
z-index: -1;
width: 100%;
height: 100%;
object-fit: cover;
}
a .machineInfoTitle {
color: #FFF;
}
.total-center {
text-align: center;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 100%;
}
<div class="machInfo25">
<a class="overlay" href="solutions">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQqXxLsqFCFPx0l_3_h5sn-0JN2oU5GU-wGnHH3CbJLSMeywV6CLA" alt="View all">
<div class="total-center">
<span class="machInfoTitle">Solutions</span>
</div>
</a>
</div>
Here I have added a sample code, Hope, this will help.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.container {
position: relative;
width: 50%;
}
.image {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
background-color: rgba(0,0,0,.5);
}
.container:hover .overlay {
opacity: 1;
}
.text {
color: white;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQqXxLsqFCFPx0l_3_h5sn-0JN2oU5GU-wGnHH3CbJLSMeywV6CLA" alt="View all" class="image">
<div class="overlay">
<div class="text">Solutions</div>
</div>
</div>
</body>
</html>
The background of .overlay was under the image. I applied the black transparency to the pseudo-code of class .overlay.
.machInfo25 {
height: 30vh;
width: 25%;
}
.overlay {
position: relative;
display: block;
}
.overlay:after {
content: "";
position: absolute;
top: 0;
left: 0;
background-color: rgb(0, 0, 0, 0.3);
width: 100%;
height: 100%;
}
.machInfo25 img {
width: 100%;
}
a .machInfoTitle {
color: white;
}
.total-center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 10;
}
<div class="machInfo25">
<a class="overlay" href="solutions">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQqXxLsqFCFPx0l_3_h5sn-0JN2oU5GU-wGnHH3CbJLSMeywV6CLA" alt="View all">
<div class="total-center">
<span class="machInfoTitle">Solutions</span>
</div>
</a>
</div>
How can I accomplish such a square with css? I don't know how to create such a border and how to center the text that perfectly.
I expect you to do something like this!
CSS:
.parent {
width: 150px;
height: 150px;
position: relative;
top: 40px;
left: 50px;
transform: rotate(45deg);
}
.parent:before {
content: "";
width: 106px;
height: 106px;
background: rgb(20, 20, 134);
position: absolute;
transform: translate(-50%,-50%);
top: 50%;
left: 50%;
}
.orange {
width: 100%;
height: 20px;
background: orange;
position: absolute;
}
.orange::before,
.orange::after {
content: "";
position: absolute;
width: 20px;
height: 50px;
background: orange;
}
.orange::after {
right: 0;
height: 95px;
}
.orange:last-of-type {
bottom: 0;
transform: scale(-1);
}
.date {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(-45deg);
color: #FFF;
line-height: 0;
}
<div class="parent">
<div class="orange"></div>
<div class="date">
<h4>May</h4>
<p>2018</p>
</div>
<div class="orange"></div>
</div>