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; }
Related
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%);
}
I am trying to add a colorful transparent overlay when you hover over an image (any color: purple, blue, red, orange would be great), but instead I am getting a white transparent overlay. Please note, I am using bootstrap grid so that my images stay responsive. I've tried everything I can think of... adding a background-color: blue with some opacity, but I am stuck. White overlay looks okay, but I wanted to have some fun with the color. Please see my code below and tell me what I need to do. Many thanks!
<div class="container">
<div class="row">
<div class="hover12 col-lg-3 col-sm-4 col-xs-6">
<a href="#" class="thumbnail">
<img src="images/flowers4.jpg" class="img-responsive">
</a>
</div>
<div class="hover12 col-lg-3 col-sm-4 col-xs-6">
<a href="#" class="thumbnail">
<img src="images/flowers5.jpg" class="img-responsive">
</a>
</div>
</div> <!-- closes div row -->
</div> <!-- closes div container -->
CSS code:
.hover12 img {
background-color: blue;
opacity: 1;
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
.hover12 img:hover{
opacity: .5;
}
opacity fades out the entire element including its background, it does not make the contents transparent and the background show through. What you would want to do instead is either put an element with your color (blue perhaps) underneath the image and make the image opaque (with opacity), or hide and show an element on top of the image that has some transparency.
Here is an example. On hover, the image becomes 50% opaque and you can see the blue element under it showing through.
.img-container {
background-color: blue;
display: inline-block;
line-height: 0;
}
.img-container img:hover {
opacity: .5;
}
<div class="img-container"><img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQU-rOCZDSdyIGgSvZhU-lqIhG32Yd8KrwI3gWKXSCayFXQuJTx0g" /></div>
Edit:
I just looked at your code again and realized you basically have it right, except you have the background color set on the img element, but it should be set on the element that contains the img, which is the .thumbnail class, so try just adding:
.thumbnail {
background-color: blue;
}
This is probably best accomplished using a pseudoelement that overlays the image. Here is how to create a pseudoelement that overlays an image and has reduced opacity when the image is rolled over:
#theimg {
position: relative;
display: inline-block;
}
#theimg::after {
content: "";
display: block;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: blue;
opacity: 1;
}
#theimg:hover::after {
opacity: .5;
}
<div id="theimg">
<img src="https://i.imgur.com/LDR6AWn.png?1" />
</div>
Easiest way is to use :before to make a semi-transparent overlay:
img:hover:before {
content: '';
position:absolute;
top:0;left:0;bottom:0;right:0;
background:rgba(0,0,255,0.3);
}
Downside is that it will block the image being clickable, and may be an issue when you are using images with CSS background instead of the <img /> in HTML.
Another way, if Internet Explorer support isn't an issue (which could be the case if this effect is just for show), you could play around with the CSS filter. It's not as easy as overlaying a transparent image over the image, but you can get some very nice effects:
img.grayscale:hover { -webkit-filter: grayscale(100%); filter: grayscale(100%); }
img.contrast:hover { -webkit-filter: contrast(150%); filter: contrast(150%); }
img.brightness:hover { -webkit-filter: brightness(1.5); filter: brightness(1.5); }
img.hue-rotate:hover { -webkit-filter: hue-rotate(90deg); filter: hue-rotate(90deg); }
img.saturate:hover { -webkit-filter: saturate(2); filter: saturate(2); }
img.blur:hover { -webkit-filter: blur(2px); filter: blur(2px); }
img.invert:hover { -webkit-filter: invert(1); filter: invert(1); }
img.sepia:hover { -webkit-filter: sepia(75%); filter: sepia(75%); }
For your question, I would recommend using .hue-rotate and maybe add a CSS transition. Note: you can combine effects!
Play around with sliders:
http://www.cssreflex.com/css-generators/filter/ or http://html5-demos.appspot.com/static/css/filters/index.html
I'm using a very fancy webkit filter to make background-images grayscale, and on hover over the images become color.
Here's the filter
filter: none;
-webkit-filter: grayscale(0);
transition: opacity .3s ease-in-out;
-moz-transition: opacity .3s ease-in-out;
-webkit-transition: opacity .3s ease-in-out;
As you can see, there's even a 'transition' property so that the image has a smooth fading transition into full color. The problem that I'm having is that the div I'm applying it to is also affecting the child text positioned inside the div, turning the text into grayscale as well. This is a problem because the text needs to be white, even when not being hovered over.
I've tried negating the filter with another one on the child text but it doesn't seem to work... Check out the fiddle
Fiddle http://jsfiddle.net/yMHm4/1/
This is not a problem of properties inheritance, as you can think.
The way filters work makes that imposible to fix changing attributes in the CSS: The element affected by the filter is rendered, all the children are rendered, and then the result (as an image) has the filter applied.
So the only alternatives left are:
1) Change the HTML, as Lowkase suggested
2) In your case, seems that all you want to make gray is the background image. In this case, you can leave the HTML as is, display the image in a pseudo element, and apply the filter to this pseudo element.
CSS
.cell{
opacity:0.7;
width:420px;
height:420px;
transition: opacity .3s ease-in-out;
-moz-transition: opacity .3s ease-in-out;
-webkit-transition: opacity .3s ease-in-out;
}
.A1 {
position: relative;
}
.A1:before {
content: "";
position: absolute;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
background-image:url('http://i.imgur.com/NNKxZ5R.jpg');
filter: url(filters.svg#grayscale); /* Firefox 3.5+ */
filter: gray; /* IE6-9 */
-webkit-filter: blur(15px); /* Google Chrome, Safari 6+ & Opera 15+ */
z-index: -1;
}
#text {
color:#ffffff;
text-align:center;
font:18px sans serif;
text-decoration:none;
}
.cell:hover {
opacity:1.0;
}
.A1:hover:before {
filter: none;
-webkit-filter: grayscale(0);
transition: opacity .3s ease-in-out;
-moz-transition: opacity .3s ease-in-out;
-webkit-transition: opacity .3s ease-in-out;
}
fiddle
I have also changed your filter to blur to make it more clear the the text is not affected by the filter. Since you had also some opacity set, the text still looked grayish just because you were seeing the gray under it.
Added example using brightness filter (for webkit)
demo 2
You had a couple of HTML errors with your br's, they should be br/, not /br.
The following solution takes the text container out of the image div and places it as an absolute positioned element:
http://jsfiddle.net/yMHm4/3/
#text {
position:absolute;
top:10px;
left:25%;
color:#ffffff;
text-align:center;
font:18px sans serif;
text-decoration:none;
}
<div id="container">
<div id="row">
<div class="cell A1"></div>
<div id="text">
<b>SPINDRIFT KIOSK</b>
<br/>
Digital Collage
<br/>
<i>Mikey</i>
</div>
</div>
</div>
You could probably use "not" selectors in your CSS but I am not sure how cross browser friendly they are. This solution is a more plain jane way to do it.
I would like to use the CSS3 scale() transition for a rollover effect, but I'd like to keep the rollover image dimensions the same. So, the effect is that the image zooms in, but it remains constrained to its existing width and height.
img:hover {
transform:scale(1.5);
-ms-transform:scale(1.5); /* IE 9 */
-moz-transform:scale(1.5); /* Firefox */
-webkit-transform:scale(1.5); /* Safari and Chrome */
-o-transform:scale(1.5); /* Opera */
}
Here's a basic fiddle to begin with.
But again, I want the image to keep the width/height.
I'm not married to using the css3 scale. Maybe there's a better way by resizing the element.
You could achieve that simply by wrapping the image by a <div> and adding overflow: hidden to that element:
<div class="img-wrapper">
<img src="..." />
</div>
.img-wrapper {
display: inline-block; /* change the default display type to inline-block */
overflow: hidden; /* hide the overflow */
}
WORKING DEMO.
Also it's worth noting that <img> element (like the other inline elements) sits on its baseline by default. And there would be a 4~5px gap at the bottom of the image.
That vertical gap belongs to the reserved space of descenders like: g j p q y. You could fix the alignment issue by adding vertical-align property to the image with a value other than baseline.
Additionally for a better user experience, you could add transition to the images.
Thus we'll end up with the following:
.img-wrapper img {
transition: all .2s ease;
vertical-align: middle;
}
UPDATED DEMO.
.img-wrapper {
display: inline-block;
overflow: hidden;
border: 1px solid gray;
}
.img-wrapper img {
-webkit-transition: all .2s ease;
-moz-transition: all .2s ease;
-ms-transition: all .2s ease;
-o-transition: all .2s ease;
transition: all .2s ease;
vertical-align: middle;
}
.img-wrapper img:hover {
-webkit-transform:scale(1.5); /* Safari and Chrome */
-moz-transform:scale(1.5); /* Firefox */
-ms-transform:scale(1.5); /* IE 9 */
-o-transform:scale(1.5); /* Opera */
transform:scale(1.5);
}
<div class="img-wrapper">
<img src="http://ts2.mm.bing.net/th?id=HN.608017620862175177&pid=15.1&H=160%20&W=80" />
</div>
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.