Trying to add an image overlay on hover but it returns the background under the image and the image stays on top how would I fix this
<div class="slider-inner pop parentSlider-cell content_overlay">
<?php echo wp_get_attachment_image($img['image'], 'carousel-image', '', ['class' => 'img-responsive myImg', 'data-track-content' => '']); ?>
</div>
.content_overlay{
position: relative;
top: 0;
left: 0;
width: 100%;
height: 100%;
color: #FFF;
&:hover{
display: block;
background: rgba(0, 0, 0, .6);
color: #1f8dd6;
z-index: 999;
}
}
Why isn't it working?
The question asks what is the problem with the overlay not overlaying the img.
The basic problem is that the img is within a div which is being used as the overlay, so when the overlay z-index is increased on hover the whole lot 'moves forward' on the z-access so their relative positions on that axis are not changed.
If we separate out the img from the overlay and make sure the overlay stacks over the img then the hover will work.
Here's a simple example, maintaining all the CSS given in the question but separating the overlay element from the containing element. Obviously in the real version the php takes the place of the img element here. img and overlay are given position absolute so they sit in the same place.
<!DOCTYPE html>
<html>
<head>
<style>
.content_overlay{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
color: #FFF;
rbackground-color:transparent;
}
.content_overlay:hover{/* taken out the & and written as pure CSS rather than SCSS/SASS */
display: block;
background: rgba(0, 0, 0, .6);
color: #1f8dd6;
z-index: 999; /* kept this but not strictly necessary */
}
</style>
</head>
<body>
<div <div class="slider-inner pop parentSlider-cell" style="width: 100px; height: 100px; position: relative;"> <!-- given style just for this demo -->
<img src="" style="width:100%;height:100%;background-color:blue;position:absolute;"/> <!-- using a blue square img element just for this demo -->
<div class="content_overlay"></div>
</div>
</body>
</html>
You can hide an image with an overlay like so:
.container {
position: relative;
width: 220px;
height: 220px;
background-color: gray;
}
#image, #overlay {
position: absolute;
width: 200px;
height: 200px;
top: 10px;
left: 10px;
}
#image {
background-image: url('https://www.licg.nl/media/1287/duitse-dog740x433.jpg');
background-size: cover;
background-position: center;
z-index: 1;
}
#overlay {
visibility: hidden;
background-color: red;
z-index: 2;
}
.container:hover #overlay {
visibility: visible;
}
<div class="container">
<div id="image"></div>
<div id="overlay">This image is now hidden</div>
</div>
I'm not sure if I understood the question properly, but if you want to hide/show an image on hover it would be something like so:
<div class="content_overlay">
hover to show image
<img src="https://placeimg.com/640/480/any" />
</div>
.content_overlay img {
display: none;
}
.content_overlay:hover img {
display: block;
}
Related
I have a weird shape svg that I cannot edit, is there a way to rotate and crop a piece of it and use it as a background image with CSS? It doesn't necessarily have to be a background image as long as its location stays intact on mobile.
This is my code:
<section id="alert">
<div class="container">
<div class="row">
<div class="col-sm-12">
<h4 class="text-center">Get scholarship alerts by providing your info:</h4>
<form class="" action="index.html" method="post">
</form>
</div>
</div>
</div>
and this is my CSS:
#alert .container {
padding-top: 4em;
padding-bottom: 4em;
}
#alert {
background-color: #004976;
color: #fff;
min-height: 400px;
position: relative;
}
#alert::after {
position: absolute;
content: '';
background-image: url(https://svgshare.com/i/SN2.svg);
width: 60px;
height: 100%;
right: 0;
top: 0;
}
With this Pseudo element it looks okay but it doesn't look like the mockup.
This is how it looks with my code:
And this is the mockup and how it should look:
This is the actual SVG file: https://svgshare.com/i/SN2.svg
Hello this is what I got, I think this is what you want to achieve?
No change was made in the HTML, the CSS changed like this:
#alert .container {
padding-top: 4em;
padding-bottom: 4em;
}
#alert {
background-color: #004976;
color: #fff;
min-height: 400px;
position: relative;
overflow: hidden;
}
#alert::after {
position: absolute;
content: '';
background-image: url(https://svgshare.com/i/SN2.svg);
background-repeat: no-repeat;
background-position: bottom;
background-size: cover;
width: 100vh;
height: 60px;
right: 0;
bottom: 0;
transform-origin: bottom right;
transform: scaleY(-1) rotate(-90deg);
}
Basically I rotated and flipped the after pseudo-element and played around with the background (I would imagine a shorthand can be used there)
I also added overflow: hidden; to make sure the SVG doesn't go outside the container
You can check out my solution here: https://jsfiddle.net/h7k2eosx/5/
Note that this can present issues depending on the screen size but this should be enough to get you going I hope :)
If your design allows it you could position the after pseudo-element with a fixed position, that would work nicely :)
( like here: https://jsfiddle.net/Ltamj8r6/ )
I'm currently facing an issue regarding a Text over an image.
Here is my css code :
.box{
position: relative;
display: inline-block; /* Make the width of box same as image */
}
.box .text{
position: absolute;
z-index: 999;
margin: 0 auto;
left: 0;
right: 0;
text-align: center;
top: 40%; /* Adjust this value to move the positioned div up and down */
background: rgba(0, 0, 0, 0.8);
font-family: Arial,sans-serif;
color: #fff;
width: 60%; /* Set the width of the positioned div */
}
Here is my html :
<div class="box">
<img src="name.jpg" alt="">
<div class="text">
SpinnerBait Brochet
</div>
</div>
Here is how it looks like in codepen.io :
BUT, when i'm adding my html in my wordpress I have a completely different rendering.
I do have my picture where I added it in the page BUT my text is in the middle of my page (and not in the middle of my image...)
Do you have any idea what could be the issue ?
Thanks
By looking at your question my guess is that you are trying to center the text on top of the image.
Try the following:
HTML:
<div class="box">
<img src="https://via.placeholder.com/350" alt="Placeholder">
<div class="text">
SpinnerBait Brochet
</div>
</div>
CSS:
.box {
display: inline-block;
position: relative;
}
.box .text {
display: inline;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #000;
color: #fff;
}
CodePen here.
Essentially what the CSS is doing is:
Positioning the text absolutely in the center of it's relative container:
display: inline;
position: absolute;
top: 50%;
left: 50%;
Changing the starting position of the X and Y axes points to the true center of the element.
transform: translate(-50%, -50%);
I'm trying to get box-shadows playing nicely with different backgrounds. The standard way seems to be using mix-blend-mode, and applying a fake div behind the real one with the effect.
An example of this technique here (click the + icon in the top right).
If I alter this code slightly to wrap the non-background elements into a container with position: fixed it breaks, example here. Note, position: absolute works fine.
I do need a structure like the example, a parent that's position-fixed and blend that can accommodate variable heights or widths and multiple instances of the .box element. I can hazard a rough guess why it doesn't work (fixed breaks it out of the doc flow and therefore there's nothing to blend), I can't see a way round it though.
Another example I made that reduces things a bit more, note how if you comment out position-fixed it works fine:
.blend {
height: 100%;
box-shadow: 0 4px 8px 0 rgba(156, 156, 156, 0.7);
mix-blend-mode: multiply;
position: absolute;
height: 100%;
width: 100%;
top: 0;
}
.box {
background: grey;
min-height: 10px;
width: 100%;
position: relative;
margin: 0 0 15px;
}
.container {
/* using absolute works */
position: absolute;
/* using fixed does not work */
position: fixed;
height: 50%;
width: 50%;
}
html {
height: 100%;
}
body {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
margin: 0;
}
.column {
position: relative;
width: 50%;
height: 100%;
}
.left {
background: #2D2D2D;
}
.right {
background: #f6f6f6;
}
<div class="column left"></div>
<div class="column right"></div>
<div class="container">
<div class="box">
text
<div class="blend"></div>
</div>
<div class="box">
text<br /><br />more text
<div class="blend"></div>
</div>
</div>
(I saw a previous question, which looks along similar lines but I couldn't get their example to work to check)
You can move the blend element out of the container and make it fixed with the same dimensions as container.
Checkout the snippet:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
html{
height:100%;
}
body {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
margin: 0;
}
.column {
position: relative;
width: 50%;
height: 100%;
}
.left {
background: #2D2D2D;
}
.right {
background: #f6f6f6;
}
.blend {
box-shadow: 0 4px 8px 0 rgba(156, 156, 156, 0.7);
mix-blend-mode: multiply;
position: fixed;
height: 50%;
width: 50%;
}
.box {
background: grey;
height: 100%;
width: 100%;
position: absolute;
}
.container {
position: fixed;
height: 50%;
width: 50%;
}
</style>
</head>
<body>
<div class="column left"></div>
<div class="column right"></div>
<div class="blend"></div>
<div class="container">
<div class="box">
text
</div>
</div>
</body>
</html>
3.2. Behavior specific to HTML
Everything in CSS that creates a stacking context must be considered an ‘isolated’ group. HTML elements themselves should not create groups. An element that has blending applied, must blend with all the underlying content of the stacking context that that element belongs to.
Eg. position: fixed will create a stacking context (isolated group).
https://drafts.fxtf.org/compositing-1/#csscompositingrules_CSS
Related answer more specific on stacking context: https://stackoverflow.com/a/56545440/7947839
I have a wrapper box that I want to animate with transform translate but if I do this I can't use fixed element inside.
example :
<div class="wrapper">
<div class="box-content">
<div class="fixed-element">
</div>
</div>
</div>
<style type="text/css">
.wrapper {
transform: translateX(50px);
background: pink;
}
.box-content {
height: 1000px;
background: green;
}
.fixed-element{
position: fixed;
top: 0;
left: 0;
width: 50px;
height: 50px;
background: blue;
}
</style>
https://jsfiddle.net/aobv5azy/
I don't want use javascript, and I want use transform translate. Animate with "left" is not good for performances.
I have been asked to create a layout that incorporates this watermark. It must be placed in such a way that the left point is in the left sidebar DIV, the top portion is transparent to the banner image, and the bottom portion is a background image to the content DIV.
I tried absolute positioning in CSS per my jsFiddle here:
<!doctype html>
<div id="all">
<div id=leftside>
</div><!-- leftside -->
<div id="banner">
</div> <!-- banner -->
<div id="rightside">
<div id="rightinner">
<h3>My Account</h3>
<input type="text" id="Login"/>
<input name="Go" type="button" id="btnLogin" value="Go"/><br/>
</div>
<!-- rightinner -->
</div><!-- rightside -->
<div id="nav">
<ul>
<li>menu item1</li>
<li>Strategy & Performance</li>
<li>Documents</li>
<li>Research & Insights</li>
<li>Contact</li>
</ul>
</div><!-- nav -->
<div id="content">
</div><!-- content -->
<div id="footer">
<div id="leftfooter">
© my copyright
</div><!-- leftfooter -->
<div id="rightfooter">
Privacy Notice
</div><!
</div>
<!-- footer -->
</div>
<!-- all -->
However, absolute positioning doesn't allow me to properly fit the pieces of the watermark together tightly enough. This is an example slice where the watermark is sliced as part of the header image.
I've attached a mockup of what the completed home page should look like:
What would be the most CSS friendly and responsive approach to ensure that the watermark DIV is transparent over the top of the background color and can be seen in the banner, left sidebar and content DIVs?
UPDATE 4/1: I've modified the CSS here as follows:
#charset "utf-8";
/* CSS Document */
body{
background-color: #003a63;
font-family: Calibri, Verdana, sans-serif;
font-size: 12pt;
width: 100%
}
html{
width:100%;
}
h3{
color: white;
}
#all {
width: 1024px;
}
#banner {
background-image: url(images/banner.png);
background-repeat: no-repeat;
height: 367px;
width: 815px;
position: absolute;
left: 232px;
top: 0px;
z-index: 999;
}
#watermarkCont{
background-color: #003a63;
width: 100%;
height: 100%;
position: absolute;
top: 0;
z-index: 25;
}
#watermark{
background-image: url(images/ghwatermark.png);
width: 576px;
height: 517px;
position: absolute;
left: 50%;
margin-left: -200px;
z-index: 25;
}
#content {
background-image: url(../images/bgcontent.png);
background-repeat: no-repeat;
height: 454px;
width: 827px;
position: absolute;
left: 228px;
top: 412px;
background-color: #FFF;
z-index: 1;
}
#leftside {
height: 895px;
width: 220px;
position: absolute;
z-index: 1;
}
#rightside {
background-color: light-gray;
height: 957px;
width: 211px;
position: absolute;
left: 1050px;
top: 0px;
z-index: -25;
}
#nav {
background-color: #c7940d;
list-style-type: none;
font: Calibri;
font-size: 12pt;
font-weight: bold;
position: absolute;
left: 231px;
top: 368px;
width: 822px;
height: 42px;
margin: 0;
padding: 0;
z-index: 999;
}
#nav ul{
margin:0;
padding:0;
}
#nav ul li{
display: inline;
font-weight: bold;
color: #FFF;
}
#rightinner {
background-color: #003a63;
height: 130px;
width: 220px;
padding: 1px 1px 1px 1px;
}
#footer {
height: 105px;
wiedth: 833px;
position: absolute;
left: 227px;
top: 864px;
width: 825px;
color: #003a63;
background-image: url(images/footerbg.png);
}
#rightfooter {
float: right;
}
#leftfooter {
float: left;
width: 225px;
}
This is closer to what I need. However, I'm not sure how to adjust the z-index values for the elemetns in question to make it look like the mockup. Can anyone provide some suggested values? My understanding is that the higher the z-index value, the higher the image is in the "stack". Is that correct?
This is my suggestion:
Give your body and html a width of 100%.
Make a new Div that would be called something like watermark container and give it a width of 100% with position absolute.
Inside that div, make another called watermark and give it a position absolute, but then you can give it a left:50% and then a negative left-margin to place it in the exact point you want it.
This will ensure that the watermark is always placed in the right spot regardless of the screen size.
Here's the code:
body, html {
width:100%;
}
#watermarkCont {
width:100%;
height:100%; //or if you want to just make this a px amount, it might not take 100% height
position:absolute;
top:0;
}
#watermark {
background-image:url("/*image*/");
width: /*whatever the image width is*/;
height: /*whatever the image height is*/;
position:absolute;
left:50%;
margin-left:-200px;
}
This approach is usually used for centering absolutely positioned elements. The negative left margin is usually half of the width of the element, but in this case, you will be pushing to the left more, so make it a bigger negative number if needed.
After you have it placed, give each element the correct z-index and your large watermark should be able to fit in place without having to be cut up.
background-image: url(/Content/Images/logo.png);
background-repeat: no-repeat;
height: 560px;/* height of page */
background-position: 50% 50%;
background-size: 300px 300px; /* width height of Image */
padding: 16px; /* as per need */