I have a background-image with transform scale and rotate. So whenever you have your cursor over it it will rotate 15deg and scale 2.
I want to place my logo over it but how can I do it so whenever I have my cursor over the logo it will still counts as I am hovering at the background? CSS:
.background-image:hover {
position: fixed;
right: 0px;
right: 0px;
z-index: -999;
display: block;
background-image: url("whatever.jpg");
width: 100%;
height: 100%;
-webkit-filter: blur(8px);
-moz-filter: blur(8px);
-o-filter: blur(8px);
-ms-filter: blur(8px);
filter: blur(8px);
transform: rotate(12deg) scale(2);
-o-transform: rotate(12deg) scale(2);
-moz-transform: rotate(12deg) scale(2);
-webkit-transform: rotate(12deg) scale(2);
transition: all 0.3s ease-in-out 0s;
}
Here I have a div over the background, if I hold my cursor over the div the hover for the background doesn't count anymore and it goes back. How can I make the div still visible and when I hover my mouse over the div the background will go back? CSS for the div:
<div class="logo-position"></div>
.logo-position {
position: relative;
width: 800px;
height: 600px;
padding: 0;
margin-right: auto;
margin-left: auto;
background-color: white;
top: 80px;
}
The "hitbox" for the div is also very weird. I can take the cursor to the right of the div and it still counts as I have my cursor inside the div as the background transform goes back. Anybody see anything I have done wrong?
Add pointer-events: none; to the .logo-position class. This should cause the logo to ignore the hover event and let it pass through. Note that it will ignore all events, so it won't be clickable either.
If the .logo-position div is a child of the .background-image div it will allow the hover to apply to the logo.
Related
Let's assume I have a button with an image inside it. Upon clicking the button, I want the background to fade out and I want a different image (similar to the button image but more modified) to show in bigger proportions. I want the image to pop up in the centre of the website and I don't want it to take up the entire space of the website - showing the faded background.
P.S. - The button image and the modified image are in two different files, and upon clicking the button, the modified image is displayed. The button has the button image file displayed as an img inside it.
You could use the before and after pseudo elements on the button to hold the two images.
This snippet puts the first image as the background to the before pseudo element and the enlarged one as the background to the after pseudo element.
The after pseudo element has opacity 0 until the button is clicked and the before pseudo element gets opacity 0 when the button is clicked. And these are reversed when the button is clicked again for this demo - it depends on exactly what you want as to what Javascript you will want to put here.
Just for the demo the change in position and the sizes are transitioned along with the opacities to get the fade effect. You could of course have the larger image shown instantly by having the transitions only on the opacities - it depends on what you need.
button {
left: 0;
top: 0;
width: 15vmin;
height: 10vmin;
position: relative;
background-color: transparent;
transition: 1s;
}
button::before,
button::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
background-size: cover;
transition: 1s;
opacity: 1;
}
button::before {
background-image: url(https://picsum.photos/id/1015/300/300?grayscale);
}
button::after {
background-image: url(https://picsum.photos/id/1015/300/300);
}
button::before,
button.clicked::after {
opacity: 1;
}
button.clicked::before {
opacity: 0.5;
}
button::after {
opacity: 0;
}
button.clicked::after {
background-size: contain;
background-position: center center;
background-repeat: no-repeat;
width: 50vw;
height: 50vh;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
button.clicked {
left: 50vw;
top: 50vh;
transform: translate(-50%, -50%);
width: 100vw;
height: 100vh;
}
<button onclick="this.classList.toggle('clicked');"></button>
I have problem on Chrome browser while combining two properties: filter: blur(15px) and transform: scale3d(1.2,1.2,1).
I have two images, one over another. Image on higer layer is blurred, but it's edges got transparent when I applied that filter, so I added overflow:hidden to parent div, and scaled up image. I expected to see just opaque part of image.
It works as expected on Firefox and Opera, however on Chrome and MS Edge browsers not. How to fix this?
#images-box{
position: relative;
width: 500px;
height: 280px;
overflow:hidden;
}
.image{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://images.unsplash.com/photo-1558389157-a986a38f3431?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1950&q=80');
background-size: cover;
background-position: 50% 50%;
}
.image.blured{
-webkit-filter: blur(14px);
filter: blur(14px);
z-index: 2;
-webkit-transform: scale3d(1.2,1.2,1);
transform: scale3d(1.2,1.2,1);
}
<div id="images-box">
<div class="image"></div>
<div class="image blured"></div>
</div>
Changing scale3d(1.2,1.2,1) to scale(1.2) helped me on Chrome 86.0.4240.198.
I'm trying to make a page where I've got 4 background pictures one behind another, and when I hover the mouse over them, the first picture goes to top left, the second to bottom left, the third, top right and the last one bottom right.
I've managed to work this out with the first one, it is exactly what I need to, but the other pictures do not even appear behind the first one, when I hover the mouse, it is just blank space. I'm using CSS because it is all I know at the moment, I have some notions of javascript but I do not know if it can help me with this issue. I put the code here for better understanding.
In the end, I just need to repeat this code 4 times, just changing the position, but I can't make it work as simple as I thought.
body,
html {
height: 100%;
margin: 0;
}
.bg {
/* The image used */
background-image: url("i3.jpg"), url("i4.jpg"), url("class.jpg"), url("prod.jpg");
/* Full height */
height: 100%;
/* Center and scale the image nicely */
background-position: center, center, center, center;
background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
background-size: cover, cover, cover, cover;
}
.bg {
/* Isso aqui deixa a imagem em preto e branco */
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
filter: grayscale(100%);
filter: gray;
/* IE 6-9 */
transition: filter .5s ease-in-out;
}
.bg:hover {
/* Isso aqui ativa o hover */
-webkit-filter: none;
-moz-filter: none;
-ms-filter: none;
filter: none;
}
.bg {
/* Isso aqui é do hover 1 */
transition: 1s ease;
}
.bg:hover {
/* Isso aqui é do hover 2 */
-webkit-transform: scale(0.8);
-ms-transform: scale(0.8);
transform: scale(0.5);
transform-origin: left top;
transition: 1s ease;
}
<div class="bg"></div>
You will need to change the background-position of all the images on hover...
body,
html {
height: 100%;
margin: 0;
}
.bg {
background-image: url("http://via.placeholder.com/80x80"), url("http://via.placeholder.com/80x80"), url("http://via.placeholder.com/80x80"), url("http://via.placeholder.com/80x80");
height: 100%;
background-position: center;
background-repeat: no-repeat;
transition: 1s ease;
}
.bg:hover {
background-position: top left, top right, bottom left, bottom right;
}
<div class="bg"></div>
I would break up the images into four separate images (with different class names) and use the z-index property.
https://www.w3schools.com/cssref/pr_pos_z-index.asp
Hope that helps
I have a div with a background-image and i'm using a filter to display it in black and white (filter: grayscale(100%);). I'm now trying to place a color icon inside that div. Tried to set the icon to grayscale(0%), but this does not appear to work.
Here is an example:
#a1, #a2 {
background-image: url(http://ndrichardson.com/blog/wp-content/uploads/2012/04/colorpsychology.jpg);
background-repeat: no-repeat;
background-size: 100% 100%;
}
#a1 {
height: 250px;
width: 250px;
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
position: relative;
}
#a2 {
height: 50px;
width: 50px;
-webkit-filter: grayscale(0%);
filter: grayscale(0%);
position: absolute;
top: 0px;
right: 0px;
}
<div id="a1"><!-- << this should be black and white -->
<div id="a2"><!-- << this should be color -->
</div>
</div>
Is there a way to do this without creating an additional div to hold the background image? The real code is much more complex, that's why I would like to avoid the extra div(s), if possible.
Yes of course, you should use ::before and ::after pseudo-elements:
#a1 {
height: 250px;
width: 250px;
position: relative;
}
#a1:after, #a1:before {
content: '';
background-image: url(http://ndrichardson.com/blog/wp-content/uploads/2012/04/colorpsychology.jpg);
background-repeat: no-repeat;
background-size: 100% 100%;
position: absolute;
}
#a1:before {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
width: 100%;
height: 100%;
}
#a1:after {
height: 50px;
width: 50px;
top: 0px;
right: 0px;
}
<div id="a1"></div>
DEMO on JSFiddle
It's not possible to have color inside a container with filter: grayscale(100%).
See the the filter property in the spec (emphasis mine):
A computed value of other than none results in the creation of a
stacking context the same way that CSS opacity does. All
the elements descendants are rendered together as a group with the
filter effect applied to the group as a whole.
So yes, you will have to separate the contents with the filter from the contents without it.
This doesn't necessarily mean you need additional wrappers in your HTML, as Hiszpan proposes you can also use pseudo-elements.
So on my page here: dunnrite.co.uk/frame2 you will find under the "text design" header some patterns beneath the 5 solid blocks of colour. They are set as background images for divs. The problem is because I want those divs so small it clips a load off of the original image. How do I get it so that the image shown is more zoomed out to show off the pattern more?
My css was just
background-image:url("Images/pattern12.jpg");
Thanks,
Jonathan
Use the background-size CSS property, and probably you want to use the cover value, which ensures that the background completely covers your container, without distorting the image (if the aspect ratio differs, then clipping will occur).
You can also specify an explicit size for your background image, for example 45px as in your case.
The documentation for background-size can be found here: https://developer.mozilla.org/en-US/docs/Web/CSS/background-size
I zoom in the element using the transform: scale(2,2); property.
here is demo link ..
http://jsfiddle.net/s3hWj/4/
<div class="wrap">
<div></div>
<p>hello</p>
</div>
html, body {
height: 100%;
}
div.wrap {
height: 33%;
width: 33%;
overflow: hidden;
position: relative;
}
div.wrap > div {
position: absolute;
height: 100%;
width: 100%;
-moz-transition: all .5s;
-webkit-transition: all .5s;
transition: all .5s;
-moz-transform: scale(1,1);
-webkit-transform: scale(1,1);
transform: scale(1,1);
background-image: url('http://pimg.tradeindia.com/00288122/b/0/Our-Valuable-Client-List-Click-on-Image-.jpg');
-moz-background-size: cover;
-webkit-background-size: cover;
background-size: cover;
z-index: -1;
}
div.wrap:hover > div {
-moz-transform: scale(2,2);
-webkit-transform: scale(2,2);
transform: scale(2,2);
}