I'm not sure if this is possible, but I'd like my thumbnail buttons to be desaturated when the text of the thumbnail is rolled over. Currently, I am calling my Wordpress post titles to appear when the Post Featured Image thumbnails are hovered over. When the thumbnail image itself is hovered over, the css effect works just fine. However, if I hover over the text of the thumbnail, the effect is broken. Is there a way around this?
.article-preview-image img:hover {
-webkit-filter: grayscale(100%) brightness(0.5);
-moz-filter: grayscale(100%) brightness(0.5);
-ms-filter: grayscale(100%) brightness(0.5);
-o-filter: grayscale(100%) brightness(0.5);
filter: grayscale(100%) brightness(0.5);
-webkit-transition: all .4s;
-moz-transition: all .4s;
-ms-transition: all .4s;
-o-transition: all .4s;
transition: all .4s;
}
<figure class="article-preview-image">
<a href="http://cks.whiterabbitstudio.us/tara-temple/">
<img width="190" height="189" src="http://cks.whiterabbitstudio.us/wp-content/uploads/2015/10/tarathumb.jpg" />
</a>
<h1 class="title">
Tara Temple
</h1>
</figure>
If this isn't possible with CSS, I'm open to using javascript, but I don't know where to look for a simple tutorial or snippet. I'm not very familiar with java.
You are almost correct. Currently, you apply the effect to img:hover. Instead, you could apply it to an img located in a .article-preview-image:hover, like below.
img { /* Universal settings */
-webkit-transition:all .4s;
-moz-transition:all .4s;
-ms-transition:all .4s;
-o-transition:all .4s;
transition:all .4s;
}
.article-preview-image:hover img {
/* When the article preview thing is being hovered, grayscale the image */
-webkit-filter:grayscale(100%);
-moz-filter:greyscale(100%);
-ms-filter:greyscale(100%);
-o-filter:greyscale(100%);
filter:grayscale(100%);
}
CSS solution:
.article-preview-image:hover img {
-webkit-filter:grayscale(100%);
-moz-filter:greyscale(100%);
-ms-filter:greyscale(100%);
-o-filter:greyscale(100%);
filter:grayscale(100%);
}
Related
I have these icons that are images that I want to apply a filter on on-hover. However, it doesn't seem to be working.
My code:
.icon {
-webkit-transition: all 1s ease;
transition: all 1s ease;
}
.icon:hover {
-webkit-filter: brightness(130%);
filter: brightness(130%);
}
It should be noted that filter does not work on Internet Explorer or Firefox 35 or earlier. If you are using those browsers, it will not work. However, if you are using a compatible browser, as you can see here, it will work.
img {
-webkit-transition: all 1s ease;
transition: all 1s ease;
}
img:hover {
-webkit-filter: brightness(130%);
filter: brightness(130%);
}
<img src="https://cr2014studyabroad.files.wordpress.com/2014/12/pineapple-2.png" width=200 height=200 />
For more information on this experimental technology, visit these links
https://developer.mozilla.org/en-US/docs/Web/CSS/filter
http://www.w3schools.com/cssref/css3_pr_filter.asp
Could it be that you already have a filter property in your .icon selector?
I found that if that's the case and you didn't copy all of its values to your :hover selector, it will prohibit the use of most transition effects.
For example:
.icon {
filter: saturate(50%);
transition: all 1s ease;
}
.icon:hover {
filter: brightness(130%); /* doesn't work */
}
vs
.icon:hover {
filter: saturate(50%) brightness(130%); /* does work */
}
Note
There seems to be an exeption for the first value of filter, but I would probably stick to the above example just to be sure.
.icon {
filter: brightness(130%) saturate(50%);
transition: all 1s ease;
}
.icon:hover {
filter: brightness(130%); /* does work */
}
I'm having trouble with having text appear when hovering over images. Trying to get get an employee page, with the images of employees on the top, and when you hover over the image, the bio displays below.
I've been trying to make this work with just css, but the longer I work on this the more I'm thinking it needs to be done in jQuery. Any help, suggestions or being pointed to an example would be much appreciated.
Here is my example.
jsfiddle
HTML
<div id="ourteam">
<img src="http://d1w5usc88actyi.cloudfront.net/wp-content/uploads/2013/06/1.jpg" id="cat1">
<img src="http://cdn77.eatliver.com/wp-content/uploads/2014/05/funny-glamour16.jpg" id="cat2">
<h3 align="center"> Our Cats</h3>
<div float="left" style="width: 50%;" id="catone">test test test test</div>
<div float="left" style="width: 50%;" id="catone">test test test test</div>
<div float="right" style="width: 50%;"id="cattwo">test2 test2 test2 test2</div>
<div float="right" style="width: 50%;"id="cattwo">test2 test2 test2 test2</div>
CSS
#catone {
display:none;
}
#cattwo {
display:none;
}
#cat1:hover #catone {
display:block;
}
#cat2:hover #cattwo {
display:block;
}
img{
height:150px;
width:150px;
-webkit-filter: grayscale(100%);
-webkit-transition: .5s ease-in-out;
-moz-filter: grayscale(100%);
-moz-transition: .5s ease-in-out;
-o-filter: grayscale(100%);
-o-transition: .5s ease-in-out;
}
img:hover {
-webkit-filter: grayscale(0%);
-webkit-transition: .5s ease-in-out;
-moz-filter: grayscale(0%);
-moz-transition: .5s ease-in-out;
-o-filter: grayscale(0%);
-o-transition: .5s ease-in-out;
}
Here is a working example. I hope this is what you mean :)
.catone {
display:none;
}
.cattwo {
display:none;
}
#cat1:hover ~ .catone {
display:block;
}
#cat2:hover ~ .cattwo {
display:block;
}
jsfiddle
You make some mistakes... you used one ID for more than one element.
And take a look at CSS3 element1~element2 Selector
I have this code:
<style>
.huerotate:hover {
-webkit-filter: hue-rotate(235deg);
-webkit-transition: all 5s ease;
}
</style>
<img class="huerotate" src="/images/header.png" alt="My Image">
The :hover selector will apply to the element while the mouse is over it, what CSS attribute should I use for mouse out to apply the filter in reverse?
Jsfiddle link
without :hover you have the "reverse" that you are looking for:
.huerotate{
-webkit-filter: hue-rotate(0deg);
-webkit-transition: all 2s ease-in-out;
}
.huerotate:hover {
-webkit-filter: hue-rotate(235deg);
-webkit-transition: all 5s ease;
}
The first is the normal state, when you hover enter in pseudo :hover and when mouse leave enter the normal state
I maked a fiddle example, is this what you want ?
http://jsfiddle.net/14f7yorh/
.huerotate:hover {
-webkit-filter: hue-rotate(235deg);
-webkit-transition: all 5s ease;
}
.huerotate {
-webkit-filter: none;
-webkit-transition: all 5s ease;
}
Site in progress:
http://www.lazydayzzz.com/
Hi guys, I'm having some issues with a hover transition here that only seems to happen in chrome.
When the user hovers over a tile, the background colour of the div changes and the opacity of the image goes down, as well as an icon appearing over the image.
In chrome it seems to reposition the image in the tile for the length of the transition.
In firefox, it works fine, and I had it working in chrome up until I started styling the footer somehow.
The problem also only seems to be with the smaller tiles, as with the big ones the transitions work fine.
Does anyone have any ideas of a possible fix?
Although the page source is available here, I can add snippets if necessary.
The site is being done for an assignment in collaboration with some journalism students.
This is the code for the tile image the image transparency go down.
.griditemsmall a:hover img {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter: alpha(opacity=50);
-o-transition: 0.5;
-moz-opacity: 0.5;
opacity: 0.5;
-webkit-opacity: 0.5;
display:inline-block;
padding-bottom: 0;
}
.griditemtall a:hover img {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter: alpha(opacity=50);
-o-transition: 0.5;
-moz-opacity: 0.5;
opacity: 0.5;
-webkit-opacity: 0.5;
display:inline-block;
padding-bottom: 0;
}
This is to call the icons on hover
.griditemtall a:hover .entypo-mute {
display:block;
margin-top: -180px;
}
can you please post you code ?
went i and transition it works well that shall be the problem
.griditemsmall {
display: inline-block;
background-color: #171818;
margin-bottom: 20px;
height: 260px;
-webkit-transition: all 300ms ease-in-out;/* Add this */
-moz-transition: all 300ms ease-in-out;
transition: all 300ms ease-in-out;
}
or something like
.gridbottomentertainment,.griditemsmall {
-webkit-transition: all 300ms ease-in-out;/* Add this */
-moz-transition: all 300ms ease-in-out;
transition: all 300ms ease-in-out;
}
I have a css based hover/click effect on my page that works great. When the item (.print) is hovered a full color image (.print_photo) appears to the right. When the item is clicked the image fades to gray and a text box (.print_text) appears.
The clicking function only works when you hold the click down, I would like it to stay visible once clicked until another item is clicked. Is this possible?
(I don't have enough reputation to post the image once I do I will post it) image size is width:620px; height:490px;
CSS
#bgtextbox{
width:320px;
height:391px;
background-color:#BCBEC0;
margin:130px 0 0 0px;
position:absolute;
text-align:center;
font-family:Arial, Helvetica, sans-serif;
z-index:1;
}
/* hover/click START */
.print{
width:340px;
height:40px;
background-color:#E6E7E8;
margin:6px 0 0 0px;
position:relative;
text-align:center;
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
line-height:40px;
border:1px solid #E6E7E8;
z-index:12;
}
.print_photo{
width:620px;
height:490px;
margin:-48px 0 0 370px;
text-align:center;
background-repeat:no-repeat;
position:absolute;
z-index:2;
}
.print_photo img{
opacity:0;
max-height:100%;
max-width:100%;
}
.print_text{
width:430px;
height:150px;
margin:292px 0 0 397px;
position:absolute;
border-radius: 20px / 20px;
opacity:.75;
color:transparent;
z-index:13;
}
.print:hover{
border:1px solid #F15A24;
cursor:pointer;
}
.print:hover ~ .print_photo img{
opacity:1;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}
.print:active ~ .print_photo img{
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
opacity:.5;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}
.print:active ~ .print_text{
background-color:#000;
color:#FFF;
}
/* END */
HTML
<div id="bgtextbox">
<div class="print">PRINT</div>
<div class="print_photo"><img src="images/print.png"</div></div>
<div class="print_text">PRINT TEXT GOES HERE</div>
</div>
You will be needing Javascript for this. There is actually a technique to do this with radio buttons and pure css, but as it is actually a hack, and quiet dirty, I will move straight to the jquery solution.
You would have to add some selectors to your existing css:
.print.active ~ .print_text, .print:active ~ .print_text {
.print.active ~ .print_photo img, .print:active ~ .print_photo img {
As you will notice, the styling will now not only be triggered when the mouse is down(:active), but also when it contains a class .active
With a few line of jQuery you can toggle that class on click:
// when print is clicked
$('.print').click(function() {
// remove the old active
$('.print.active').removeClass('active');
// add the active class to the trigger
$(this).addClass('active');
});
A working example can be found here:
http://jsfiddle.net/WRwVf/
edit:
To include this code in your page, you would have to load the jQuery library first. Add something like this as the last node of your body:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
Below this you could then put your script. Note that it would be wise to put it inside an 'ready' event as well. Something like this:
<script type="text/javascript">
// when the DOM is ready
$(document).ready(function() {
/* - The above code goes here - */
});
</script>
You can also put the script in a separate .js file, and load it in the same way as the jquery library, but as it is just a few lines of code, this will be considered overkill by some, as the extra http request would slow your page down.
You're going to need to use JS for this. Have some JS that gets run onClick of one of your .print elements which adds a 'selected' class to it, removing that class from all other elements first.
You have to use JS to set a class, then remove it when needed.
HTML
<div id="bgtextbox">
<div id="print" class="print">PRINT</div>
<div class="print_photo"><img src="images/print.png"</div></div>
<div class="print_text">PRINT TEXT GOES HERE</div>
</div>
CSS
.printactive ~ .print_photo img{
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
opacity:.5;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}
.printactive ~ .print_text{
background-color:#000;
color:#FFF;
}
JS
document.getElementById("print").addEventListener("click",activatePrintDiv);
function activatePrintDiv(){
var pclass = this.getAttribute("class");
this.setAttribute("class",pclass+" printactive");
}
The easiest solution is to use JS for this, as #DuncanLock recommends. The more creative (but CSS-based) way to do it is to create a sibling of .print that is a checkbox.
<div id="bgtextbox">
<div class="print">PRINT</div>
<input type="checkbox" class="print_checkbox" />
<div class="print_photo"><img src="images/print.png"</div></div>
<div class="print_text">PRINT TEXT GOES HERE</div>
</div>
Set its CSS to be:
.print_checkbox {
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
opacity:0.01;
}
So it fills up the whole area the div does, and looks transparent. I should point out to casual observers that you would need to set the position of the parent (#bgtextbox) as well, but he already did that in his CSS.
Then have the CSS use the :checked psuedo-class to show the img based on checked (clicked) or not. Just change this:
.print:active ~ .print_photo img
To this:
.print_checked:checked + .print_photo img
You'll still need the JS solution for IE8-, but you would have already needed it anyway using the ~ CSS selector, so there isn't any difference in terms of browser compatibility.
Just food for thought. This isn't exactly WYSIWYG coding methodology, but if you're the kind of developer that tries to leverage CSS over JS whenever possible (like me), it's a cool little trick.