I am making a large button with a blurred background image that unblurs when you hover over it. I have used a container with overflow hidden and made the margin negative on the background image so that the edges are defined.
However, when I hover over the image and it does the transition from blurred to unblurred, or vice versa, the edges of the image are no longer defined. This creates an effect where the edges of the white container underneath it will be visible. While completely blurred or completely unblurred, these edges immediately become defined again.
How can I fix this?
body {
background-color: black;
}
.container {
position: fixed;
top: 2.5vh;
left: 2.5vh;
width: 50vh;
height: 50vh;
background-color: white;
overflow: hidden;
}
.image {
background-image: url(https://www.decorativefair.com/wp-content/uploads/2017/09/yellow-wallpaper-12-1024x640.jpg);
margin: -5%;
width: 110%;
height: 110%;
filter: blur(6px);
transition: 1s;
}
.image:hover {
filter: blur(0px);
}
<!DOCTYPE html>
<html>
<body>
<div class="container">
<div class="image"></div>
placeholder text
</div>
</body>
</html>
I think it's a browser bug.
the container background can be seen at the borders.
It can be made less visible if the container background is the same than the image. I have used inherit in the image to avoid setting it in 2 places.
body {
background-color: black;
}
.container {
position: fixed;
top: 2.5vh;
left: 2.5vh;
width: 50vh;
height: 50vh;
background-image: url(https://www.decorativefair.com/wp-content/uploads/2017/09/yellow-wallpaper-12-1024x640.jpg);
overflow: hidden;
}
.image {
background-image: inherit;
margin: -5%;
width: 110%;
height: 110%;
filter: blur(6px);
transition: 1s;
}
.image:hover {
filter: blur(0px);
}
<!DOCTYPE html>
<html>
<body>
<div class="container">
<div class="image"></div>
placeholder text
</div>
</body>
</html>
The issue appears to be caused by the negative margin and 110% width and height settings in the .image css class. I assume you're doing that to try and maintain a crisp edge when blurred. I modified those and the snippet below shows the result. Hopefully it will be useful:
body {
background-color: black;
}
.container {
position: fixed;
top: 2.5vh;
left: 2.5vh;
width: 50vh;
height: 50vh;
overflow: hidden;
}
.image {
background-image: url(https://www.decorativefair.com/wp-content/uploads/2017/09/yellow-wallpaper-12-1024x640.jpg);
margin: 0;
width: 100%;
height: 100%;
filter: blur(6px);
transition: 1s;
}
.image:hover {
filter: blur(0px);
}
<!DOCTYPE html>
<html>
<body>
<div class="container">
<div class="image"></div>
placeholder text
</div>
</body>
</html>
Related
Can I change the opacity of the background picture in HTML?
I found one solution online but in it a box was added on top of the background picture and the box's opacity was changed hence changing the opacity of the background picture.
body {
background-image: url("http://placekitten.com/g/300/100");
background-repeat: no-repeat;
background-size: 100% 100%;
}
.div1 {
text-align: center;
font-size: 30px;
font-family: 'Rubik', sans-serif;
margin: 30px;
background-color: #ffffff;
border: 1px solid black;
opacity: 0.8;
}
<!DOCTYPE html>
<html>
<body>
<div class="div1">
<p> HERE THE TEXT AND OTHER PARAGRAPH WILL BE ADDED.</p>
</div>
</body>
</html>
You can change the opacity with CSS on the image itself, however it will change the opacity for the child elements too.
So I would do it as following, create a wrapper element with position relative. Then add an extra background div that will stretch over the relative wrapper, functioning as a background image for the content div. Now you can change opacity on the image.
.wrapper {
position: relative;
}
.wrapper .background {
background-image: url("http://uploads.refuzion.nl/stock.jpeg");
background-repeat: no-repeat;
background-size: 100% 100%;
opacity: 0.3;
width: 100%;
height: 100%;
position: absolute;
}
.div1 {
text-align: center;
font-size: 30px;
font-family: 'Rubik', sans-serif;
margin: 30px;
background-color: #ffffff;
border: 1px solid black;
}
<!DOCTYPE html>
<div class="wrapper">
<div class="background"></div>
<div class="div1">
<p> HERE THE TEXT AND OTHER PARAGRAPH WILL BE ADDED.</p>
</div>
</div>
That being said the code you've included with your answer already functions as expected and basically does the same result as my solution.
Use this CSS for that
img {
opacity: 0.5;
}
I am fairly new to HTML in the past month. I cannot for the life of me, figure out how to change the second image on hover to be a different image when the mouse hovers over it. I know some of the code probably looks dumb with how I tried to guess how I could possibly alter the second hover image. But I am quite confused. If anyone could help that would be great. The only progress I made so far is finally getting them perfectly aligned the way I would want them in the center and also the smooth transition to the hover. All that is left is being stumped on how to change the image to a different one when you hover over the second image. I do not want both hover images to be the same.
* {
background-color: coral;
}
.container {
position: relative;
width: 50%;
overflow: hidden;
display: table-cell;
border: 1px solid transparent;
/* a way to add a space around */
}
#media screen and (max-width:480px) {
.container {
/* make them full-width and one-a-row */
width: 100%;
display: block;
}
}
.image {
display: table-cell;
width: 100%;
height: auto;
transition: all .4s ease-in;
}
.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
transition: .5s ease;
background-image: url("sketchcollage.JPG");
color: white;
text-align: center;
padding-top: 40%;
}
.overlay .overlay2 {
background-image: url("digitalartcollage.JPG");
}
a {
color: white;
}
.container:hover .overlay {
opacity: 1;
}
.container:hover .image {
transform: scale(1.2);
-webkit-transform: scale(1.2);
}
h1 {
text-align: center;
font-size: 72px;
background: -webkit-linear-gradient(rgb(12, 215, 230), rgb(170, 9, 130));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
<h1> Who is Rosalyn? </h1>
<div class="container">
<a href="https://trezoro.co">
<img src="https://via.placeholder.com/500" alt="Le Tricolore Smartwatch" class="image">
<div class="overlay">
<p>Entire element is the link here</p>
</div>
</a>
</div>
<div class="container">
<img src="https://via.placeholder.com/500" alt="Le Tricolore Smartwatch" class="image">
<div class="overlay">
<a href="https://trezoro.co">
</a>
</div>
<div class="overlay2">
<p>Only the text is a link </p>
</div>
</div>
I don't know what is p tags are for, so I removed those. Also, I used a div with background-image instead img tag. when you hover on the container, the image changes.
* {
background-color: coral;
}
.flex{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
height: 50vh;
}
.container {
position: relative;
width: 48%;
overflow: hidden;
}
#media screen and (max-width:480px) {
.container {
width: 100%;
margin-top: 20px;
}
.flex{
height: 100vh;
}
}
.img{
background-size: 100% 100%;
transition: all .4s ease-in;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity: 1;
}
.img1{
background-image: url('https://s4.uupload.ir/files/5c29cf910a706_8m.jpg');
}
.img2{
background-image: url('https://s4.uupload.ir/files/717195_346_g0du.jpg');
}
a {
color: white;
}
.container:hover .img {
transform: scale(1.2);
-webkit-transform: scale(1.2);
opacity: 0.5;
}
.container:hover .img1{
background-image: url('https://s4.uupload.ir/files/0.270967001322580170_jazzaab_ir_ajvv.jpg');
}
.container:hover .img2{
background-image: url('https://s4.uupload.ir/files/7560b48482bfae5c-02b97ffc647f-3822363654_tji3.jpg');
}
h1 {
text-align: center;
font-size: 72px;
background: -webkit-linear-gradient(rgb(12, 215, 230), rgb(170, 9, 130));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
<h1> Who is Rosalyn? </h1>
<div class="flex">
<div class="container">
<a href="https://trezoro.co">
<div class="img img1"></div>
</a>
</div>
<div class="container">
<div class="img img2"></div>
</div>
</div>
QUESTION
How to change the second image on hover to be a different image when the mouse hovers over it?
ANSWER
The approach of this question is to change an image when the user hovering the mouse over it. This task can be simply done by using the CSS background-image property in combination with the :hover pseudo-class to replace or change the image on mouseover.
.changeImg:hover {
background-image:
url("https://images.app.goo.gl/gfRnCCBPH6r4v3kp6");
}
Having trouble trying to get a certain effect going on:
I have an image. I want to hover over it. It should turn a little black and have some text pop up.
example ^
What's the easiest/simplest setup to do this? Preferably only HTML and CSS
Note: The element needs a background-image being set in CSS.
.thumbnail {
background-image: url(potato.jpeg);
height: 400px;
width: 450px;
}
.thumbnail:hover {
background: rgb(0, 0, 0);
height: 400px;
width: 450px;
opacity: 0.5;
transition: 0.8s;
}
\
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="thumbnail"> </div>
</body>
</html>
You should use a seperate element for the overlay, in my example a child element. Only the hover status is visible, the regular status isn't, due to opacity: 0
.thumbnail {
background-image: url(https://placehold.it/450x400/fa0);
height: 400px;
width: 450px;
}
.overlay {
background: rgb(0, 0, 0);
height: 400px;
width: 450px;
opacity: 0;
transition: 0.8s;
}
.thumbnail:hover .overlay {
opacity: 0.5;
}
<div class="thumbnail"><div class="overlay"> </div> </div>
It becomes a bit more complex when text is involved which should have no opacity at all: In the following example the overlay element has a semi-transparent background-color and gets opacity: 1 when the parent is hovered. That way the text has no opacity when hovered, but the background still has due to its own opacity setting of 0.5:
.thumbnail {
background-image: url(https://placehold.it/450x400/fa0);
height: 400px;
width: 450px;
}
.overlay {
background: rgba(0, 0, 0, 0.5);
height: 400px;
width: 450px;
opacity: 0;
transition: 0.8s;
font-size: 36px;
color: #fff;
}
.overlay:hover {
opacity: 1;
}
<div class="thumbnail"><div class="overlay">SOME TEXT</div></div>
I want to create a landing page like a game. The visitor gets the option either to chose "Professioneel" or "Speels".
Telling it is easy but programming it is hard for me, so this is what I want:
2 div's with 2 different background-image when someone hover over one of the divs I want the background-image to scale (ONLY THE IMAGE) and the opacity placed on the div to change from 50% to 80%.
And a really nice future would be to display a snow falling gif over the image.
This is what I want to create:
Before
After:
What I have achieved till now is making the 2 divs with a background-image and I'm not even sure if that is the right way.
Can someone please help me out?
This is what happens when I hover with my current code: (the whole div scales, not only the image)
As an user asked, here some code:
#containerEntree {
height: 100vh;
width: 1920px;
padding-left: 0;
padding-right: 0;
}
#professioneelContainer {
background-color: red;
text-align: center;
width: 1920px;
height: 475px;
}
#speelsContainer {
background: red;
width: 100%;
height: 475px;
text-align: center;
}
.entreeTekst:hover {
transform: scale(1.2);
}
.entreeTekst {
width: 100%;
height: 100%;
position: relative;
transition: all .5s;
margin: auto;
}
.entreeTekst > span {
color: white;
/* Good thing we set a fallback color! */
font-size: 70px;
position: absolute;
}
<div class="container" id="containerEntree">
<div id="professioneelContainer">
<div class="entreeTekst">
<span>professioneel</span>
<img src="img/professioneel.jpg" />
</div>
</div>
<div id="speelsContainer">
<div class="entreeTekst">
<span>Speels</span>
<img src="img/speels.jpg" />
</div>
</div>
</div>
Please note that I'm still working on it so don't say that this (of course) won't work.
You can do this by using 2 divs with background images and use padding on the div to replicate the aspect ratio of the background image. Scale the image using background-size on :hover. Then use a pseudo element to create the color overlay and transition the opacity on :hover, then use the other pseudo element on top of that with the text and the "snow" gif as a background.
body {
width: 600px;
max-width: 80%;
margin: auto;
}
div {
background: url('https://static.tripping.com/uploads/image/0/5240/towns-funny-names-us_hero.jpg') center center no-repeat / 100%;
height: 0;
padding-bottom: 33.33333%;
position: relative;
transition: background-size .25s;
}
.speel {
background-image: url('http://www.luketingley.com/images/large/The-Punchbowl-Web-Pano.jpg');
}
div::after, div::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
}
div::before {
opacity: .5;
transition: opacity .25s;
}
.pro::before {
background: blue;
}
.speel::before {
background: red;
}
div::after {
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-family: sans-serif;
font-size: 1.5em;
font-weight: bold;
}
.pro::after {
content: 'PROFESSIONEEL';
}
.speel::after {
content: "SPEELS";
}
div:hover::after {
background: url('https://media.giphy.com/media/26BRyql7J3iOx875u/giphy.gif') center center no-repeat / cover;
}
div:hover::before {
opacity: 0.8;
}
div:hover {
background-size: 150%;
}
<div class="pro">
</div>
<div class="speel">
</div>
You can simply increase the background-size: height width; and opacity: value; property when you hover over an element. You can, if you want to, add some transition to make it smooth. This only scales the background image, not the div itself.
#d {
background-image: url(https://cdn.pixabay.com/photo/2016/10/29/20/52/cincinnati-1781540_960_720.png);
height: 200px;
width: 200px;
background-size: 100px 100px;
background-repeat: no-repeat;
background-position: center;
/*To make the transistion smooth*/
-o-transition:.5s;
-ms-transition:.5s;
-moz-transition:.5s;
-webkit-transition:.5s;
transition:.5s;
opacity: 0.5;
}
#d:hover {
background-size: 110px 110px;
opacity: 0.8;
}
<div id='d'>
</div>
I've been learning about the :after selector, and I wanted to create a nice looking gallery.
I've made the thumbnail I want for the gallery. Currently my thumbnail only works with an :after selector.
However instead of making each individual thumbnail its own class, I want to be able to set the background image in the HTML file.
I want to know what the best way to accomplish this.
body{
font-family: Arial, sans-serif;
}
a, a:hover, a:focus{
text-decoration: none;
color: #fff;
}
.thumbnailouterwrap{
width: 250px;
height: 250px;
}
.imgthumbnail{
text-align: center;
width: 100%;
height: 100%;
background-color: transparent;
color: #ffffff;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
overflow: hidden;
opacity: 1;
position: relative;
}
.imgthumbnail:after{
content:'';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url("http://doc.jsfiddle.net/_downloads/jsfiddle-logo.png");
background-size: cover;
background-position: center;
transition: 500ms all ease-in-out;
}
.thumbnailinnerwrap{
width: 100%;
height: 100%;
overflow: hidden;
background-color: #1d1d1d;
}
.thumbtext{
opacity: 0;
transition: 500ms all ease-in-out;
transform: scale(1, 1);
z-index: 1;
}
.imgthumbnail hr{
width: 0%;
border-top: solid 1px #fff;
transition: 800ms all ease-in-out;
}
.imgthumbnail:hover .thumbtext, .thumbtext:hover{
opacity: 1;
}
.imgthumbnail:hover hr, hr:hover{
width: 100%;
}
.imgthumbnail:hover:after{
transform: scale(1.2, 1.2);
opacity: 0.7;
filter: blur(2px);
}
<body>
<div class="thumbnailouterwrap">
<a href="http://jsfiddle.net" class="anchorthumb">
<div class="thumbnailinnerwrap">
<div class="imgthumbnail">
<div class="thumbtext">
<h3>Title</h3>
<hr/>
<p>Description</p>
</div>
</div>
</div>
</a>
</div>
</body>
JsFiddle
Sorry if this isn't clear, or if this post is bad (it's my first)
If I understand correctly, you want to style a parent element with the image of the child.
What you can do is setting the background-image of .parentSelector, but put a background-size of 0.
Then you inherit this background-image in .childSelector, and put a larger background-size.
div {
outline: 1px solid black;
}
.parentSelector {
background-image: linear-gradient(green, gold);
background-size: 0 0;
display: block;
overflow: hidden;
height: 50vh; width: 50vh;
}
.childSelector {
display: inline-block;
background-image: inherit;
background-size: cover;
}
<div class='parentSelector'>
parentSelector
<div class='childSelector'>
childSelector
</div>
</div>
It's not recommended to set the background-image in the html file.
If you want to use :after selector, you can use data- attribute but that is not implemented anywhere yet. (Using HTML data-attribute to set CSS background-image url)
.imgthumbnail:after{
content:'';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: attr(data-image-src url);
background-size: cover;
background-position: center;
transition: 500ms all ease-in-out;
}
...
<div class="imgthumbnail" data-image-src="http://doc.jsfiddle.net/_downloads/jsfiddle-logo.png">
<div class="thumbtext">
<h3>Title</h3>
<hr/>
<p>Description</p>
</div>
</div>
...
You can set the background image to each element using :nth-child selector. You can add the style tag to the html file but it's not in the html content.
Example:
.imgthumbnail:first-child:after {
background-image:url(first_image_url);
}
.imgthumbnail:nth-child(2):after {
background-image:url(second_image_url);
}
... and so on.
http://www.w3schools.com/cssref/sel_nth-child.asp