I added transitions on the images for the image gallery on this website https://sandbox.graphicandwebdesign.ca/karim-jamous/newsletter/index.html eases in (fades in), but instantly goes back to its original state, when the mouse goes off the image? Any way to have the transition reverse when you take your mouse off?
Add the transition to the non-hovered state:
.gallery img {
box-shadow: 7px 7px 13px 0px rgba(0,0,0,0.75);
filter: grayscale(100%) blur(1px);
transition: 1s;
}
The rationale here is that when you're not hovering over the image the :hover rules no longer apply. So if the transition is declared under :hover it effectively ceases to exist the moment you exit the hover.
here is your solution
.gallery img:hover {
filter: grayscale(0%);
}
/*you need to use transition in image here*/
.gallery img {
box-shadow: 7px 7px 13px 0px rgba(0,0,0,0.75);
filter: grayscale(100%) blur(1px);
transition: 1s;
}
<div class="gallery"> <img src="https://sandbox.graphicandwebdesign.ca/karim-jamous/newsletter/pic4.jpg" width="250" height="250" alt="fourthpicture"> </div>
Related
I have added drop shadows to labels for checkboxs so that when they are checked the drop shadow appears. They work perfectly on chrome however when I tried them on safari on both my mac and iPhone the drop shadows are not appearing. I have tried using the -webkit-filter CSS but this has not had any effect.
I have included both the HTML and CSS below.
<li>
<input type="checkbox" id="dairy" name="lifestyle" value="dairy-">
<label for="dairy">
<img src="https://cdn.shopify.com/s/files/1/0433/2958/5306/files/Cheese_Icon.png?v=1611093331" class="choose--contents--img" alt="">
<p>Dairy</p>
</label>
</li>
label {
display: flex;
flex-direction: column;
align-items: center;
border: 1px solid #5E7735;
background-color: white;
border-radius: 8px;
width: 117.5px;
height: 140px;
box-sizing: border-box;
cursor: pointer;
}
:checked + label {
filter: drop-shadow(6px 6px 0 #5E7735);
-webkit-filter: drop-shadow(6px 6px 0 #5E7735);
-moz-filter: drop-shadow(6px 6px 0 #5E7735);
-ms-filter: drop-shadow(6px 6px 0 #5E7735);
-o-filter: drop-shadow(6px 6px 0 #5E7735);
transition: filter 0.1s ease-in;
-webkit-transition: filter 0.1s ease-in;
}
They should look like this
But they look like this (the shadow is cut off)
As I was playing with this I think one solution could be to use a box shadow, and apply border-radius that is using vw, for proportionality.
Something like this:
.class {
box-shadow: 6px 6px 0 #5E7735;
border-radius: 5vw; /* Or whatever fits the corners of the image used) */
}
It's a workaround but hopefully it can help someone out there!
I'm sorry I don't have any more information about this but I simply don't know what it is. I've been asked to copy some other design that was written in old techonology but wasn't given a source for this, just an example.
I think the way they did theirs was 2 images, when hovering it would switch to another image with more drop shadow.
Is there a way to do this with an image in css: https://i.imgur.com/k7oBR7g.gifv
Hope this will help you
img:hover {
box-shadow: 3px 3px 3px 0px rgba(0,0,0,0.5);
transform: translate(-2px,-2px);
}
This can be simply possible with images, place the images in one block and animate them on hover. Like:
Html
<div class="imgblk">
<img src="img1" class="img">
<img src="img2" class="img">
<img src="img3" class="img">
</div>
CSS
.imgblk
{
/* style the image block as per your design */
}
.imgblk img
{
width:150px;
height:150px;
object-fit:cover:
transition:all ease .3s;
display:inline-block:
margin-right:5px;
}
.imgblk img:hover
{
transform: translate(-1px, -3px);
box-shadow: 0px 2px 5px 0px #333;
}
Or the better way, use Icons like font-awesome (http://fontawesome.io/icons/) instead of image
Hope this will help you.
I am trying to do a css blurry glass effect with filters, but it's not working in the way it should.
The div has no opacity at all and it's not blurry.
Code(CSS):
#siteDesc
{
text-align: center;
background-color: #FFFFFF;
width: 1200px;
margin: 0 auto;
margin-top: 30px;
padding: 10px;
padding-bottom: 20px;
border-radius: 5px;
}
#siteDesc:after
{
opacity: 0.7;
filter: blur(1px);
-moz-filter: blur(1px);
-webkit-filter: blur(1px);
-o-filter: blur(1px);
}
Edit:
Link to jsfiddle: http://jsfiddle.net/qy1sar8h/
Updated for relevance Sep 2021
There is a backdrop-filter CSS property that can achieve the frosted glass look.
See https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter for full details.
It is part of CSS Filter Effects Module Level 2 and the syntax for a blur filter is as follows:
backdrop-filter: blur(10px);
The background of the element will be blurred, but not the content or descendent elements.
To create a frosted glass effect, combine this property with an RGBA background colour that gives the background some transparency, e.g.:
background-colour: Reba(255, 255, 255, 0.7);
backdrop-filter: blur(10px);
This feature is available in all major browsers except Firefox (available behind a flag from Firefox 70) and Internet Explorer.
The technique you attempted will blur the full contents of whatever element it is applied to, and not just the background as you intended.
The only technique I know involves faking the blur with positioned background images either using a pre-blurred image or taking advantage of the filter CSS property to blur the original. I don't use this technique because it's too easy for the images to be out of alignment and your trick no longer looks good.
The pseudo-element won't render without a content property and, in any case will not blur the associated parent div.
Applying a filter to the pseudo-element will only blur the content of the pseudo-element.
body {
background-color: #37E1E4;
}
#siteDesc {
text-align: center;
background-color: #FFFFFF;
margin: 0 auto;
margin-top: 30px;
padding: 10px;
padding-bottom: 20px;
border-radius: 5px;
}
#siteDesc:after {
content: 'SOME TEXT';
opacity: 0.7;
filter: blur(1px);
-moz-filter: blur(1px);
-webkit-filter: blur(1px);
-o-filter: blur(1px);
}
<div id="siteDesc">
<p>Hello, this is my fiddle.</p>
</div>
If you apply the blur to the div itself you get this: JSFiddle Demo
EDIT: It's not entirely clear how this is supposed to look but the only option I see for blurring the background is not to have background on div element itself but rather simulate a background with a pseudo-element.
body {
background-color: #37E1E4;
}
#siteDesc {
text-align: center;
width: 90%;
margin: 10px auto;
margin-top: 30px;
padding: 10px;
padding-bottom: 20px;
border-radius: 5px;
position: relative;
font-weight:bold;
}
#siteDesc:before {
content: '';
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;
-webkit-filter: blur(1px);
filter: blur(1px);
background-color: rgba(255,255,255,0.7);
z-index:-1;
}
<div id="siteDesc">
<p>Hello, this is my fiddle.</p>
</div>
I am trying to make an effect where when one hovers on my greyscale image, the image turns to color and all the highlights hide.
I have achieved turning my images from greyscale to color on the hover, my problem resides in turning off the multiple highlights.
Here is a link so you can see where I'm at: www.karenrubkiewicz.com
And some coding:
HTML
<a href="#" ><img class="greyscale" src="images/projects/operakrakowska/operakrakowska_01.png" width="750px"/></a>
<span class="highlight">Opera Krakowska</span>
*All highlighted words have been given this span
CSS
img.greyscale {
filter: gray; /* IE6-9 */
-webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */
-webkit-transition: grayscale 500ms;
-moz-transition: grayscale 500ms;
-o-transition: grayscale 500ms;
transition: grayscale 500ms;
}
img.greyscale:hover {
filter: none;
-webkit-filter: grayscale(0%);
}
.highlight{
background-color:#FF0;
}
Further more, I would like the transitions to fade in and out.
Any help would be appreciated.
Thanks in advance!
No, there is no "previous sibling" selector. Source
A solution to your problem is to wrap the .highlight and the next a in a div. And write hover for this div.
EG :
HTML
<div class="item">
<h3><span class="highlight">Opera Krakowska</span><br>
<span class="h2">10.15.2013</span><br>
</h3>
<img class="greyscale" src="images/projects/operakrakowska/operakrakowska_01.png" width="750px">
</div>
CSS
.item:hover a img.greyscale {
filter: none;
-webkit-filter: grayscale(0%);
}
.item:hover h3 .highlight{ display:none; }
I'm trying to put a vignette on an image link, that when hovered over dissipates. The current code I'm using works fine in Firefox, but in chrome, the transition effect doesn't run.
If you were to remove the thumbnail image, the background has the same effect and does show the transition on it.
Is this a bug?
<article>
<div class="thumbnail">
<img src="images/download.jpg" alt="" />
</div>
<div class="article-text">
<h3>Article Header</h3>
<div class="author">
Author Name here. Date Posted Here.
</div>
<p>Lorem ipsum</p>
<div class="meta">
<ul class="meta-items">
<li>Arbitrary Number</li>
</ul>
<a class="button" href="#">
<span>Read More</span>
</a>
</div>
</div>
</article>
The full css/html can be seen on JSfiddle:
http://jsfiddle.net/aSTKK/
No, it is not a bug. Transitions on pseudo-elements only work in Firefox (personally, I'd like to see them working in other browsers in the future), though there is a way to emulate them for some properties. If you remove the thumbnail image, you see the transition on the element itself (which is below the image when you have it), not on the pseudo-element.
Possible solution: you could make the image semitransparent and change its opacity to 1 on hover (see this gallery of examples I did a while ago, especially row 3, column 3).
Something like this (I've changed the shadow on the pseudo-element to red in order to make it more visible).
Relevant CSS:
.thumbnail {
width:48%;
height:200px;
float:left;
padding:0;
background:#37779f;
box-shadow: inset 0 0 230px 40px rgba(0, 0, 0, 0.5);
-webkit-transition: 1.3s;
-moz-transition: 1.3s;
transition: 1.3s;
overflow:hidden;
text-align:center;
}
.thumbnail a{
position:relative;
max-width:100%;
float:left;
}
.thumbnail:hover{
box-shadow:inset 0 0 115px 20px rgba(0,0,0,0.5);
}
.thumbnail a:after{
content:'';
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
box-shadow:inset 0 0 115px 20px rgba(255,0,0,1);
}
.thumbnail img {
width:100%;
height:auto;
opacity: .3;
-webkit-transition: 1.3s;
-moz-transition: 1.3s;
transition: 1.3s;
}
.thumbnail:hover img {
opacity: 1;
}