So, I have one div
<div id="particles-js" >
and in css I have
#particles-js{
width: 100%;
height: 100%;
background-color: #b61924;
background-image: url("../js/image.jpg");
background-size: cover;
background-position: 50% 50%;
background-repeat: no-repeat;
}
but I also need to put some black overlay effects on image before it sets background.
How to do that?
image style..
.image {
width:100%;
vertical-align:top;
content:'\A';
position:absolute;
height:100%;
top:0; left:0;
background:rgba(0,0,0,0.6);
opacity:0.5;
transition: all 0.5s;
-webkit-transition: all 0.5s;
}
You might try this. It will add a black overlay to the image. You can change the rgb to rgba to make it more transparent.
background:linear-gradient(0deg, rgb(0, 0, 0), rgb(0, 0, 0)), url("../js/image.jpg");
Related
I am very new to web development and I have come across an obstacle.
I want to have the linear gradient at the bottom of the image (so the image fades into black) however I'm not sure on how to bring it there. Would I need to change the size of the background image or the gradient, I'm not too sure. I will attach my css and an image.
Any help would be appreciated! image
*{
margin:0;
padding:0;
box-sizing:border-box;
}
body{
background-color:black;
min-height:3000px;
min-width:0px;
background-image:url("images/background.png");
background-repeat:no-repeat;
}
#section{
object-fit:cover;
position:absolute;
width:100%;
height:100%;
object-fit:none;
pointer-events:none;
overflow:hidden;
top:0;
left:0;
}
section:before{
content:'';
position: absolute;
bottom: 0;
width: 100%;
height: 2000px;
background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 50%, rgba(0,0,0,0.3) 80%, #000 100%);
z-index: 100000;
}
You can just apply it directly to your body's background image.
body {
background-color:black;
min-height:3000px;
min-width:0px;
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0%), rgba(0, 0, 0, 100%)), url("images/background.png");
background-repeat:no-repeat;
}
I'm having some problems I'm trying to have two clip path polygons overlap each other when hovered over by the mouse, I'm using z-index's and trying to change them depending on with overlay is being hovered over but I can't seem to get it to work. I've tried changing the z-index when the object is hovered over but that doesn't seem to change anything.
.banner {
position:relative;
bottom 0;
top: 0;
left:0;
right: 0;
width: 100%;
height: 700px;
}
.overlayleft {
position:absolute;
z-index:1;
bottom 0;
top: 0;
left:0;
right: 0;
width: 50%;
height: 100%;
overflow:hidden;
clip-path: polygon(0 0, 75% 0, 100% 100%, 0% 100%);
background: rgba(0,0,0,1);
transition: .5s ease;
}
.overlayright {
position:absolute;
z-index:2;
bottom: 0;
top 0;
left: 50%;
right: 0;
width: 50%;
height: 100%;
overflow:hidden;
clip-path: polygon(0 0, 100% 0, 100% 100%, 25% 100%);
background: rgba(0,0,0,0.6);
transition: .5s ease;
}
.overlayleft:hover{
z-index: 4;
width: 100%;
}
.overlayright:hover{
z-index: 4;
width: 100%;
left: 0;
}
<!DOCTYPE html>
<html>
<body>
<div class="banner">
<div class="overlayright"></div>
<div class="overlayleft"></div>
</div>
</body>
</html>
Its because of this "background: rgba(0,0,0,0.6);"
Its color with opacity, if you change the color to something else, lets say red color, you will see the difference.
Basically left div is black, and the second div is gray, when gray one is hovered its not visible that it is hovering the left one because of its opacity...
I want to add linear Gradient transition on hover.
I did some research and found how it works but unfortunately they work only for buttons etc whereas I want it on an image .
I have added an image using css property background-image . And I want that when user hover the image the image shows linear gradient with transition .
Here is the code .
.project-1 {
background-image: url("https://cdn.pixabay.com/photo/2018/03/11/20/42/mammals-3218028_960_720.jpg");
width: 350px;
height: 250px;
background-position: center;
background-size: cover;
transition: transform 0.5s , opacity 0.5s;
}
.project-1:hover {
background-image: linear-gradient(rgba(0, 0, 0, 0.39) , rgba(0, 0, 0, 0.39)) , url("https://cdn.pixabay.com/photo/2018/03/11/20/42/mammals-3218028_960_720.jpg");
background-position: center;
background-size: cover;
transform: scale(1.05);
}
<div class="project-1"></div>
The topics I found on stackoverflow have buttons or simple background without any image.
(The Image I used in the code is just for snippet)
You cannot apply a fade transition with a linear-gradient like this. An alternative is to use a pseudo-element on where you apply an opacity transition:
.project-1 {
background-image: url("https://cdn.pixabay.com/photo/2018/03/11/20/42/mammals-3218028_960_720.jpg");
width: 350px;
height: 250px;
background-position: center;
background-size: cover;
transition: transform 0.5s, opacity 0.5s;
}
.project-1:before {
content: "";
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.39);
transition: 0.5s;
opacity: 0;
}
.project-1:hover {
transform: scale(1.05);
}
.project-1:hover::before {
opacity: 1;
}
<div class="project-1"></div>
Or you can have another kind of transition with the gradient by playing with background-size or background-position. Here is an example:
.project-1 {
background-image:
linear-gradient(rgba(0, 0, 0, 0.39) , rgba(0, 0, 0, 0.39)) , url("https://cdn.pixabay.com/photo/2018/03/11/20/42/mammals-3218028_960_720.jpg");
width: 350px;
height: 250px;
background-position:0 0,center;
background-size:100% 0%,cover;
background-repeat:no-repeat;
transition: 0.5s;
}
.project-1:hover {
background-image:
linear-gradient(rgba(0, 0, 0, 0.39) , rgba(0, 0, 0, 0.39)) , url("https://cdn.pixabay.com/photo/2018/03/11/20/42/mammals-3218028_960_720.jpg");
background-size:100% 100% ,cover;
transform: scale(1.05);
}
<div class="project-1"></div>
I'm trying to do a simple animation using only css. The idea is that when I hover a social icon it will seem like it's lifting up. I managed to do that but now i want to use "border" to seem like it's the icon's shadow. I reduced the thickness of the border on hover but I wanted to make it seem more realistic and somehow reduce the width of the border when hovering over. Any ideas?
Here is my fiddle: http://jsfiddle.net/Iulius90/sck4Lzz9/
html
<div>
<img src="http://fc05.deviantart.net/fs70/f/2012/204/7/b/logo_skype_by_jackal807-d58ctxc.png">
</div>
css
div {
width:200px;
height:200px;
background-color:tomato;
}
img {
width: 100px;
height:100px;
margin: 50px;
border-bottom: 3px solid #222;
transition: all 0.35s ease;
}
div img:hover {
margin-top: 22px;
padding-bottom:28px;
border-bottom: 1px solid #222;
transition: all 0.35s ease;
cursor: pointer;
}
You can simply use a solid linear gradient as a background image, and manipulate its dimensions upon hover. Note: You might want to use vendor prefixes to generate CSS gradients that are cross browser compatible.
img {
background-image: linear-gradient(to top, rgba(0,0,0,.5) 0%, rgba(0,0,0,.5) 100%);
background-position: center bottom;
background-repeat: no-repeat;
background-size: 100% 3px;
width: 100px;
height:100px;
margin: 50px;
transition: all 0.35s ease;
}
div img:hover {
background-size: 50% 1px;
margin-top: 22px;
padding-bottom:28px;
transition: all 0.35s ease;
cursor: pointer;
}
http://jsfiddle.net/teddyrised/sck4Lzz9/26/
I want to zoom in onto the pencil when hovered over the image.
HTML:
<div>
</div>
CSS:
div {
width: 400px;
height: 267px;
border: 1px solid black;
background-image: url('http://i.imgur.com/n9q7jhm.jpg');
background-size: 400px 267px;
transition: all 1s ease;
}
div:hover{
background-size: 500px 333px;
background-position: -60px -60px;
}
JSFiddle: http://jsfiddle.net/AX59Y/
My naive attempt was to increase the size and change the position of the image, however as you can see from the jsfiddle, the transition is very jagged as it tries to accomplish both transitions at the same time.
Is there a better way?
Take the answer from SW4 and change the left and top changes for a transform origin
#image {
background-image: url('http://i.imgur.com/n9q7jhm.jpg');
background-size: 400px 267px;
background-position:center;
transition: all 1s ease;
width:100%;
height:100%;
transform: scale(1);
position:relative;
left:0;
top:0;
-webkit-transform-origin: 75% 75%;
transform-origin: 75% 75%;
}
#wrapper:hover #image {
-webkit-transform: scale(2);
transform: scale(2);
}
The 75% 75% is more or less the position of the pencil , but you can set it to whatever you want.
fiddle
You can use the transition to scale up and reposition the image on hover, in order to do this you'll need to wrap the image div within a parent with overflow hidden.
Demo Fiddle
HTML
<div id='wrapper'>
<div id='image'></div>
</div>
CSS
#wrapper {
width: 400px;
height: 267px;
border: 1px solid black;
overflow:hidden;
position:relative;
}
#image {
background-image: url('http://i.imgur.com/n9q7jhm.jpg');
background-size: 400px 267px;
background-position:center;
transition: all 1s ease;
width:100%;
height:100%;
transform: scale(1);
position:relative;
left:0;
top:0;
}
#wrapper:hover #image {
transform: scale(2);
-webkit-transform: scale(2);
left:-150px;
top:-100px;
}
If you change your transition to linear it looks much less 'jagged'.
transition: all 1s linear;
Not sure if this is the behaviour that you want.