I have a div with a background image. I want to be able to set a black transparent overlay on hover. How can I achieve this?
This is what I have so far
div {
background: url('map-tracks.png');
background-size: cover;
transition: background-color 1s;
&:hover {
background-color: rgba(0, 0, 0, 0.5);
}
}
Assuming you actually want to see the background image still, use a pseudo element.
div {
background: url('http://via.placeholder.com/200x200');
background-size: cover;
transition: background-color 1s;
width: 200px;
height: 200px;
}
div:hover:after
{
background: rgba(0, 0, 0, 0.50);
content: '';
position: absolute;
width: 200px;
height: 200px;
}
<div></div>
Put an overlay (a div or something else) with absolute or relative positioning and with the proper black-semi transparent styling. Anyway you need another object for the overlay.
Related
I am trying to add this animation to my background, but when going on mobile device, the background triples even when I set the background size cover, on pc version it works fine, only one background. Why is this happening?
.main {
background-image: url("~#/assets/main-bg.png");
background-position: center;
background-size: cover;
width: 100%;
height: 100vh;
overflow-y: scroll;
animation: shrink 5s infinite alternate;
box-shadow: inset 0 0 0 2000px rgba(0, 0, 0, 0.4);
}
#keyframes shrink {
0% {
background-size: 110%;
}
100% {
background-size: 100%;
}
}
You can keep the cover property if you use scale instead of changing background size. Obviously you don't want the whole of main to scale in and out - only the image - so put that as background on the before pseudo element, set it as cover and to transform between scale 1.1 and 1.
That way you get both effects and it's fully responsive.
.main {
width: 100%;
height: 100vh;
overflow-y: scroll;
position: relative;
}
.main::before {
content: '';
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
animation: shrink 5s infinite alternate;
background-image: url("https://picsum.photos/id/259/1024/768");
background-position: center;
background-size: cover;
box-shadow: inset 0 0 0 2000px rgba(0, 0, 0, 0.4);
}
#keyframes shrink {
0% {
transform: scale(1.1);;
}
100% {
transform: scale(1.0);
}
}
<div class="main"></div>
Add in this css property background-repeat: no-repeat;
This will stop the background image from appearing more than once.
Also, your keyframes changes the background size from cover to 100/110%. Over riding the property.
I am trying to set my HTML background in a way that it looks like it consists of two triangles but I cannot seem to get it to fully fit the page. How would I accomplish that and additionally be able to set a custom color for both?
Here is the code I am working with:
#container {
position: relative;
height: 800px;
width: 800px;
overflow: hidden;
background: grey;
margin-left: -0.4%;
margin-top: -0.4%;
}
#container:before {
content: '';
position: absolute;
left: 28%;
top: 28%;
width: 1200px;
height: 1200px;
background-color: rgb(255, 255, 255); /* fallback */
background-color: rgba(255, 255, 255, 0.5);
-webkit-transition: all 1s;
-moz-transition: all 1s;
transition: all 1s;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
transform: rotate(45deg);
}
<div id="container"></div>
I tried changing all the height and width to 100vh and 100vw but that did not seem to help and there is no option to get the colors changed. Any help would be appreciated!
You can do it with the background: linear-gradient():
html, body {margin: 0; width: 100vw; height: 100vh}
body {
background: -webkit-gradient(linear, left top, right bottom, color-stop(50%, Salmon), color-stop(50%, Khaki));
background: -webkit-linear-gradient(top left, Salmon 50%, Khaki 50%);
background: -o-linear-gradient(top left, Salmon 50%, Khaki 50%);
background: linear-gradient(to bottom right, Salmon 50%, Khaki 50%);
}
http://jsfiddle.net/Liamm12/kkt1kd34/
I hope this what are you looking to do
I just set up the body height:100%; and Width:100%; the page will take the full screen
We should add min-height: 100% to the container it will helps the body to be full screen
And finally I just added padding-bottom to container:after it will makes the design as triangles
html, body {
height: 100%;
width:100%;
margin: 0;
}
#container {
position: relative;
min-height: 100%;
overflow: hidden;
background-color: #645384;
}
#container:after {
content: '';
position: absolute;
padding-bottom: 141.42136%;
left: 30%;
width: 100%;
background-color: #f37638;
-webkit-transition: all 1s;
-moz-transition: all 1s;
transition: all 1s;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
transform: rotate(45deg);
}
<!doctype html>
<html>
<head>
<title></title>
</head>
<body>
<div id="container"></div>
</body>
</html>
In order to answer this question, I have used multiple techniques:
Create the aspect ratio box: This is necessary for second steps (since I need a square for this to work.
For more information, you can look through this: Aspect Ratio Boxed
I have used CSS border triangle in order to provide what you are requesting. Look for more detail here: CSS Triangle
So what I have done is, creating a square box, setting the border to make the arrow. I have also made the jsfiddle for you to look through.
https://jsfiddle.net/vqmjyjhw/
I have also add css variable on top to help you modify the box fast if you need to:
:root {
--width: 100%;
--halfWidth: 242px;
--topColor: red;
--bottomColor: blue;
}
With width variable, you can use %. But in order for the trick to work, halfWidth need to be in px. You can use some extra javascript to calculate exactly what is the width of your container to set halfWidth properly.
I'm currently editing a subreddit on reddit.com and my methods are restricted on CSS only.
I managed to get a overlay effect when you hover over the menu on the left side. It's fading in, but I don't know how to fade it out. Since transition wasn't working I tried another method with an animation.
TL;DR: Overlay fade in: yes - fade out: no :(
Here are some parts of the code I used:
#sr-header-area .drop-choices:hover:before {
content: "";
font-size: 13px;
display: block;
position: fixed !important;
height: 100%;
width: 100%;
margin-left: 300px;
pointer-events: none;
z-index: 700 !important;
animation: fade 0.5s ease;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;}
#keyframes fade {
0% {background-color: rgba(0, 0, 0, 0);}
100% {background-color: rgba(0, 0, 0, 0.4);}}
Maybe someone can help me out here.
You should be able to achieve this effect with transitions and that would be the way I'd personally recommend. Heres a quick implementation: https://jsfiddle.net/z1c8bvcd/1/
The main thing to remember is that you need to define the CSS properties that the div will return to once the hover state is no longer in effect, not just what they look like when hovered otherwise the :before pseudo element will be removed from the DOM.
#foo:before {
content: "";
background: rgba(255, 255, 255, 0);
transition: background 0.5s, margin-left 0.5s;
width: 100%;
height: 100%;
position: fixed!important;
margin-left: 50px;
}
#foo:hover:before {
background: rgba(0, 0, 0, 0.3);
margin-left: 300px;
}
I think you can also achieve a similar effect using keyframes, but I think the animation would run once when the page loads and then whenever the div is hovered.
I am having a page transition from a background-color to a background-image. I have tried a variety of options...but it seems when the page transitions to the background image, it needs some background-color, and sets background-color:transparent..and the image never shows. Here is my CSS:
#keyframes backgroundintro {
0% {
background:#000000;
}
25% {
background:#0c2336;
}
100% {
background: linear-gradient(
rgba(255, 0, 0, 0.45),
rgba(255, 0, 0, 0.45)
), url('../IMG/background.png') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
/*isolation: isolate;
mix-blend-mode: color-burn;*/
}
}
body {
animation-duration: 43.90s;
transition-timing-function: ease-in;
animation-name:backgroundintro;
}
I'm blending a background-color and the background-image..so using a gradient.
Fiddle here: https://jsfiddle.net/7god9hoL/
The trick really is to make a background image transparent. This can be achieved by using pseudo-element (e.g. :before) which covers your main element (hence the absolute positioninig and top, left, bottom, right set to 0). Then the as an animation you just change the opacity of this pseudo-element. Here's a simple example:
(after running the snippet hover the square)
div {
width: 200px;
height: 200px;
background: red;
position: relative;
z-index: 1;
}
div:before {
content: "";
position: absolute;
display: block;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 10;
background: url('http://www.bestmanspeechestoasts.com/wp-content/themes/thesis/rotator/sample-4.jpg');
opacity: 0;
transition: all 1s;
}
div:hover:before {
opacity: 1;
}
<div></div>
How can I create a button so that on hover the background colour fills the element from center to left and right of the element.
Example :
I know how to use CSS3 transitions and can get it to animate to the desired shape but can't get it to transition from center outwards.
The shape does not change size I just want to fill it using a transition.
Another way to achieve a similar effect would be to use linear-gradient as the background-image, position the image at the center of the element and then transition background-size from 0% 100% to 100% 100% on hover. Incrementing background-size in X axis from 0% to 100% would mean that the background color will slowly fill up the element and keeping its position fixed at the center would mean that the color would grow from center to the left and right edges at the same time.
Gradients have lower support than transforms and that is one drawback compared to the answer that has been provided by web-tiki's but this approach does not require any extra pseudo-elements which mean that they can be used for other purposes.
div {
position: relative;
display: inline-block;
padding: 15px 70px;
border: 5px solid #B17461;
color: #B17461;
font-size: 30px;
font-family: arial;
background-image: linear-gradient(#B17461, #B17461);
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: 0% 100%;
transition: background-size .5s, color .5s;
}
div:hover {
background-size: 100% 100%;
color: #fff;
}
<div>NEXT</div>
The very same approach can be used for producing a variety of different fill approaches depending on the position of the gradient image.
div {
position: relative;
display: inline-block;
padding: 15px 70px;
border: 5px solid #B17461;
color: #B17461;
font-size: 30px;
font-family: arial;
background-image: linear-gradient(#B17461, #B17461);
background-repeat: no-repeat;
transition: background-size .5s, color .5s;
}
.center-right-left, .center-top-bottom, .center-corner {
background-position: 50% 50%;
}
.to-left {
background-position: 100% 50%;
}
.to-right {
background-position: 0% 50%;
}
.to-top {
background-position: 50% 100%;
}
.to-bottom {
background-position: 50% 0%;
}
.center-right-left, .to-left, .to-right {
background-size: 0% 100%;
}
.center-top-bottom, .to-top, .to-bottom {
background-size: 100% 0%;
}
.center-corner {
background-size: 0% 0%;
}
div:hover {
background-size: 100% 100%;
color: #fff;
}
<h4>From center towards left and right</h4>
<div class='center-right-left'>NEXT</div>
<h4>From center towards top and bottom</h4>
<div class='center-top-bottom'>NEXT</div>
<h4>From center towards corners</h4>
<div class='center-corner'>NEXT</div>
<h4>From right to left</h4>
<div class='to-left'>NEXT</div>
<h4>From left to right</h4>
<div class='to-right'>NEXT</div>
<h4>From bottom to top</h4>
<div class='to-top'>NEXT</div>
<h4>From top to bottom</h4>
<div class='to-bottom'>NEXT</div>
To fill an element with a solid color from center on hover, you can use a pseudo element and CSS3 transitions.
In the following example, the background is made with a pseudo element and scaled from 0 to 1 horizontaly on hover:
div {
position: relative;
display: inline-block;
padding: 15px 70px;
border: 5px solid #B17461;
color: #B17461;
font-size: 30px;
font-family: arial;
-webkit-transition: color .5s;
transition: color .5s;
}
div:before {
content: '';
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
background: #B17461;
z-index: -1;
-webkit-transform:scaleX(0);
-ms-transform:scaleX(0);
transform:scaleX(0);
-webkit-transition: -webkit-transform .5s;
transition: transform .5s;
}
div:hover {
color: #fff;
}
div:hover:before {
-webkit-transform: scaleX(1);
-ms-transform: scaleX(1);
transform: scaleX(1);
}
<div>NEXT</div>
you can do a button with this structure
<button>
<text layer>
<image layer>
</button>
on.hover -> button > image
transform-origin: center
insert desired effect here
*edit -- seems like you want the text the have color changes while transition is happening..
you can do a 2 image button inside a div
on hover hide the whtie background image and display the div that contains the brown image
<div container>
<img borwn butn>
</div>
Set the width of container to 0 pix and fix it to the center
and then animate just the width will give you the desired results.