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>
Related
The goal is to create a simple and CSS-only image / photo gallery, where the user can click to popup. The user should also be able to click anywhere to close the image.
With no dependencies or any kind of script, and with as less code as possible.
I created this simple css image / photo gallery:
* {
margin: 0;
padding: 0;
}
body {
background-color: black;
}
.container {
width: 100%;
height: 100%;
}
.top {
display: flex;
width: 80vw;
height: 80vh;
margin-top: 10vh;
margin-left: auto;
margin-right: auto;
margin-bottom: 10vh;
}
.top ul {
list-style: none;
width: 100%;
height: 100%;
z-index: 1;
box-sizing: border-box;
}
.top ul li {
position: relative;
float: left;
width: 25%;
height: 25%;
overflow: hidden;
}
.top ul li::before {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000;
content: "";
color: white;
opacity: 0.4;
text-align: center;
box-sizing: border-box;
pointer-events: none;
}
.top ul li:hover::before {
opacity: 0;
background-color: rgba(0, 0, 0, 0.9);
}
.top ul li img {
width: 100%;
height: auto;
overflow: hidden;
}
.lightbox {
position: fixed;
width: 100%;
height: 100%;
text-align: center;
top: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.75);
z-index: 999;
opacity: 0;
pointer-events: none;
}
.lightbox img {
max-width: 90%;
max-height: 80%;
position: relative;
top: -100%;
}
.lightbox:target {
outline: none;
top: 0;
opacity: 1;
pointer-events: auto;
}
.lightbox:target img {
top: 0;
top: 50%;
transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
}
<div class="container">
<div class="top">
<ul>
<li>
<img src="https://image.freepik.com/free-photo/desert-and-the-road_426-19314945.jpg">
</li>
<li>
<img src="https://image.freepik.com/free-photo/sunlight-through-the-grass_385-19321333.jpg">
</li>
<li>
<img src="https://image.freepik.com/free-photo/colorful-springtime_385-19321241.jpg">
</li>
<li>
<img src="https://image.freepik.com/free-photo/from-blue-to-brown_426-19320820.jpg">
</li>
</ul>
<img src="https://image.freepik.com/free-photo/desert-and-the-road_426-19314945.jpg">
<img src="https://image.freepik.com/free-photo/sunlight-through-the-grass_385-19321333.jpg">
<img src="https://image.freepik.com/free-photo/colorful-springtime_385-19321241.jpg">
<img src="https://image.freepik.com/free-photo/from-blue-to-brown_426-19320820.jpg">
</div>
</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 was trying to participate in a CSS challenge when this occurred. Everything seems working as expected, however when clicking on the plus circle to display div#card the div.container loses it's top margin and I cannot understand why. Please if anyone can help me with this, I'd be really grateful - And maybe we can all learn from it ;)
Thanks!
Codepen: https://codepen.io/albertrf147/pen/LMKKeK
HTML
html,
body {
width: 100%;
height: 100%;
}
body {
margin: 0px;
overflow: hidden;
background: lightblue;
}
.container {
width: 400px;
height: 400px;
margin: 20px auto !important;
position: relative;
display: flex;
flex-wrap: wrap;
background: white;
padding: 2px;
}
.square {
box-sizing: border-box;
padding: 2px;
width: 50%;
height: 50%;
position: relative;
background: white;
}
.square>img {
height: 100%;
width: 100%;
object-fit: cover;
display: block;
margin: auto;
}
.onhover {
box-sizing: border-box;
width: 100%;
height: 100%;
position: absolute;
cursor: pointer;
transition: all .6s ease-in-out;
}
.onhover:hover {
background: rgba(0, 0, 0, 0.5);
}
.circle-aux {
position: relative;
width: 100%;
height: 100%;
transition: all .6s ease-in-out;
}
.circle-aux:hover .circle {
visibility: visible;
opacity: 1;
transform: scale(0.2);
transition: all .6s ease-in-out;
}
.circle {
visibility: hidden;
opacity: 0;
position: absolute;
border-radius: 50%;
width: 100%;
height: 100%;
background: salmon;
}
.circle:before {
content: "";
background: white;
height: 50%;
width: 6px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.circle:after {
content: "";
background: white;
height: 6px;
width: 50%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.container-card {
visibility: hidden;
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
}
.container-card>img {
width: 100%;
height: 60%;
object-fit: cover;
}
.container-card:target {
visibility: visible;
}
.avatar {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 50%;
box-shadow: 0px 0px 20px black;
width: 25%;
height: 25%;
background: white;
z-index: 2;
text-align: center;
font-family: calibri;
font-weight: bold;
color: white;
font-size: 18px;
}
.avatar>img {
box-sizing: border-box;
width: 100%;
height: 100%;
object-fit: cover;
border-radius: inherit;
padding: 4px;
}
.mini-circle {
display: inline-block;
width: 15%;
height: 15%;
border: 1px solid white;
border-radius: 50%;
margin-top: 12px;
}
.mini-circle:hover {
background: white;
cursor: pointer;
}
footer {
box-sizing: border-box;
position: absolute;
bottom: 0;
left: 0;
background: salmon;
height: 50%;
width: 100%;
z-index: 1;
padding: 2px;
}
.close {
position: absolute;
border-radius: 50%;
width: 8%;
height: 8%;
background: black;
transform: rotate(45deg);
right: 10px;
top: 10px;
cursor: pointer;
}
.close:before {
content: "";
background: white;
height: 60%;
width: 2px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.close:after {
content: "";
background: white;
height: 2px;
width: 60%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<main>
<div class="container">
<div class="square">
<div class="onhover">
<div class="circle-aux">
<a class="circle" href="#card"></a>
</div>
</div>
<img src="https://images.pexels.com/photos/305241/pexels-photo-305241.jpeg?auto=compress&cs=tinysrgb&h=650&w=940" />
</div>
<div class="square">
<div class="onhover">
<div class="circle-aux">
<div class="circle"></div>
</div>
</div>
<img src="https://images.pexels.com/photos/1546711/pexels-photo-1546711.jpeg?auto=compress&cs=tinysrgb&h=650&w=940" />
</div>
<div class="square">
<div class="onhover">
<div class="circle-aux">
<div class="circle"></div>
</div>
</div>
<img src="https://images.pexels.com/photos/1800433/pexels-photo-1800433.jpeg?auto=compress&cs=tinysrgb&h=650&w=940" />
</div>
<div class="square">
<div class="onhover">
<div class="circle-aux">
<div class="circle"></div>
</div>
</div>
<img src="https://images.pexels.com/photos/1757111/pexels-photo-1757111.jpeg?auto=compress&cs=tinysrgb&h=650&w=940" />
</div>
<div id="card" class="container-card">
<a class="close" href="#"></a>
<img src="https://images.pexels.com/photos/1769331/pexels-photo-1769331.jpeg?auto=compress&cs=tinysrgb&h=650&w=940" />
<div class="avatar">
<img src="https://images.pexels.com/photos/769772/pexels-photo-769772.jpeg?auto=compress&cs=tinysrgb&h=650&w=940" />
<span>David Craig</span>
<span>
<div class="mini-circle"></div>
<div class="mini-circle"></div>
<div class="mini-circle"></div>
</span>
</div>
<footer></footer>
</div>
</div>
</main>
Welcome to SO!
As the appearing container is position: absolute no margin takes effect.
You need to work with the top attribute to place it properly.
Check this out: https://codepen.io/anon/pen/pGzVyL
For more informations click here: https://www.w3schools.com/css/css_positioning.asp
I'm trying to modify this
code, so the box would slide to the left side of the box.
I was thinking that I should just change in class .overlay right: 0; to right: 100%;, but its not doing anything. It should look like this
Also What should I do when when the box slides to the right side and I hover my mouse to it my box stays until I move my mouse away, how can I fix it?
Here is the css code when I did tha animation to the right side:
.container {
position: relative;
width: 50%;
}
.image {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
bottom: 0;
left: 100%;
right: 0;
background-color: #008CBA;
overflow: hidden;
width: 0;
height: 100%;
transition: .5s ease;
}
.container:hover .overlay {
width: 100%;
}
.text {
white-space: nowrap;
color: white;
font-size: 20px;
position: absolute;
overflow: hidden;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
Use this code to move the overlay to left on hover
.overlay {
position: absolute;
bottom: 0;
left: 0;
background-color: #008CBA;
overflow: hidden;
width: 0;
height: 100%;
transition: .5s ease;
}
.container:hover .overlay {
width: 100%;
left: -100%;
}
.container {
position: relative;
width: 50%;
float:right;
}
.image {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
bottom: 0;
left: 0;
background-color: #008CBA;
overflow: hidden;
width: 0;
height: 100%;
transition: .5s ease;
}
.container:hover .overlay {
width: 100%;
left: -100%;
}
.text {
white-space: nowrap;
color: white;
font-size: 20px;
position: absolute;
overflow: hidden;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
<h2>Slide in Overlay from the Right</h2>
<p>Hover over the image to see the effect.</p>
<div class="container">
<img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar" class="image">
<div class="overlay">
<div class="text">Hello World</div>
</div>
</div>
Is this what you're trying to do? https://codepen.io/anon/pen/MmNXmN
HTML
<h2>Slide in Overlay from the Right</h2>
<p>Hover over the image to see the effect.</p>
<div class="container">
<img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar" class="image">
<div class="overlay">
<div class="text">Hello World</div>
</div>
</div>
CSS
.container {
position: relative;
width: 50%;
float: right;
}
.image {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
bottom: 0;
right: 100%;
right: 0;
background-color: #008CBA;
overflow: hidden;
width: 0;
height: 100%;
transition: .5s ease;
}
.container:hover .overlay {
width: 100%;
right: 100%;
}
.text {
white-space: nowrap;
color: white;
font-size: 20px;
position: absolute;
overflow: hidden;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
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