Is it possible to change the color of an image using only CSS?
(I'm using the transparent backgrounded glyphicons, and I need different symbol [not background] colors for my theme)
You can use image tints, but I don't know if it's going to give you the effect you expect:
Basically you wrap a <figure> element around your <img/> and apply styling to it:
/*HTML*/
<figure class="tint">
<img src="icon.png" width="400" height="260">
</figure>
/*CSS*/
.tint {
position: relative;
float: left;
cursor: pointer;
}
.tint:before {
content: "";
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0,255,255, 0.5);
-moz-transition: background .3s linear;
-webkit-transition: background .3s linear;
-ms-transition: background .3s linear;
-o-transition: background .3s linear;
transition: background .3s linear;
}
.tint:hover:before {
background: none;
}
Check the link for a demo and full code samples.
On this website you can also check out some different methods.
No. As these are image icons you can not change their color. You can try using these http://www.entypo.com/. As these are fonts they can easily change colors.
Related
I´m trying to build up a new site. The work is nearly done, but I need a last detail. I´m using a grid with thumb/headline and link-function to detail sites.
I want to visualize the link-function with some hover-effects (delivered by my template).
This is the link to the project-site - and I´m looking for help on my mainpage:
https://emc.ow-media.de/
If you hover the thumb of the document or the thumbs of the three links at the end of the page, you can see a hover effect. I want to use this effect also on the grid element at the top (the 6 thumbs).
Can you give me a hint, how to get this working with CSS?
Thanks a lot!
You have sample already there. If you inspect the element, you can see how it works. The code the bottom elements use is as follows:
CSS:
figure.sc_image a {
content: '';
width: 100%;
display: block;
height: 100%;
top: 0;
left: 0;
opacity: 0;
position: absolute;
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
-ms-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}
figure.sc_image a {
background-color: rgba(50,172,121,0.8) !important;
}
figure.sc_image a:hover {
opacity: 1;
}
HTML:
<figure class="sc_image sc_image_shape_square">
<img src="https://emc.ow-media.de/wp-content/uploads/2021/06/Leistungen-Potentialanalyse1.jpg" alt="">
<a class="img_icon icon-file-pdf" href="http://emc.ow-media.de/was-wir-tun-detail"></a>
</figure>
Essentially what is happening, is that there is an invisible element a, with set opacity of 0. When someone hovers the element it gets to set the opacity of 1. The animation is done by the transition property, which eases the change of opacity. You can mimic the effect on your other elements.
I want to replicate the effect of the that you see in the pictures here: http://www.akqa.com/work/
I thought this was the code necessary for it but it doesn't work. What is missing?
div {
opacity .4s,transform .4s
}
There are three things wrong here.
Firstly opacity .4s,transform .4s is not a valid CSS declaration.
The correct syntax looks like this:
div {
-webkit-transition: opacity .4s ease .4s;
transition: opacity .4s ease .4s;
}
Secondly, a transition rule implies that there are different values for the first and second instance (a point A and point B if you will). In the example below, you will notice that I have specified opacity:0; unless the div has a class .showing in which case it now has a rule that states opacity:1;
div {
opacity: 0;
-webkit-transition: opacity .4s ease .4s;
transition: opacity .4s ease .4s;
}
div.showing {
opacity: 1;
}
Lastly, you will also require something to change the state of the div to "let it know it needs to change it's opacity". We already told it in the CSS above that when it has a class .showing it's opacity is different.
A nice way to do this is to add a tiny jQuery script to give it the new class once the page has fully loaded.
jQuery(window).load(function(){
$('div').addClass('showing');
});
Are you focus on the text popup effect after mouse over the image? If yes, i did some trace from the html and css file.
<article class="work-item in-view" ...>
<picture>
<source></source>
<source></source>
<source></source>
<img></img>
<div class=content>
/* pop up text content*/
</div>
</picture>
</article>
.work-item {
background-color: #000;
cursor: pointer;
float: left;
overflow: hidden;
position: relative;
width: 100%
}
.work-item .content {
background-color: rgba(0,0,0,0);
bottom: 0;
color: #FFF;
height: 100%;
left: 0;
padding: 0 30px;
pointer-events: none;
position: absolute;
right: 0;
top: 0;
-webkit-transition: background-color .4s;
transition: background-color .4s;
width: 100%
}
I hope this findings may help you.
If the direction is correct, you can grep 'work-item' and 'content' from the css and follow the logic.
.posts .img-hover:before {
content: '';
display: block;
opacity: 0;
-webkit-transition: opacity 1.2s ease;
-moz-transition: opacity 1.2s ease;
-ms-transition: opacity 1.2s ease;
-o-transition: opacity 1.2s ease;
transition: opacity 1.2s ease-out;
}
.posts .img-hover:hover:before {
content: '';
display: block;
background: url("img/Texture1.png");
width: 320px;
/* image width */
height: 220px;
/* image height */
position: absolute;
top: 13px;
right: 2px;
opacity: 1;
}
<div class="posts">
<a href="#">
<h2 class="postname">
Travel Flashback #1 </h2>
</a>
<a class="img-hover" href="#">
<img width="960" height="720" src="http://.." class="img-hover" alt="" />
</a>
</div>
I have one problem with this code. As you see I want transition over pseudo element ::before, which has bkg img.
When I hover on, transition works smoothly, but when I leave mouse, bkg img goes away immediately without transition.
Can you please suggest something?
On the hover you probably only want the css related to the transition, not the actual styles for the pseudo element. Try this
.posts .img-hover:before {
content: '';
display: block;
background: url("img/Texture1.png");
width: 320px; /* image width */
height: 220px; /* image height */
position: absolute;
top: 13px;
right: 2px;
opacity: 0;
-webkit-transition: opacity 1.2s ease;
-moz-transition: opacity 1.2s ease;
-ms-transition: opacity 1.2s ease;
-o-transition: opacity 1.2s ease;
transition: opacity 1.2s ease-out;
}
.posts .img-hover:hover:before{
opacity: 1;
}
For others browsing through this forum, I came to this thread with exact same problem, I tried to switch transition focus from
opacity 0.35s ease-in-out
to:
all 0.35s ease-in-out
and issue was resolved.
My browser is Chromium version 80.0.3987.162, Debian Linux 10.4
My issue was actually that the transition did not work at all. The element appears and disappears instantly. For those with a similar problem and came here, I believe CSS ignores the on-hover transition for an empty element even if the content will be added on hover and the reason it doesn't transition when you hover off is because the content is removed immediately.
Instead of
elem:before{
opacity:0;
transition: opacity 1.2s ease-out;
}
elem:hover:before {
opacity:1;
content:'something';
}
move content to elem:before
elem:before{
opacity:0;
content:'something';
transition: opacity 1.2s ease-out;
}
elem:hover:before {
opacity:1;
}
If you want the content only on hover but you want to transition another property (like width) and opacity can't be used, content: ''; should work on hover but remember to keep the property even when you hover off.
To answer OP's question and why the solution by ynter works it's because the background disappears once they hover off. Keep the background in the :before element.
So i'm doing a transition effect on an <a> that has no default background image so when I try to hover over it the transition effect doesn't work. I doubt that without having a default background image it'll not work. So how can I achieve my goal or any alternative on doing that without using javascript? Here is my code:
<nav>
<li>Products</li>
</na>
Here is my css:
.nav>li>a { font-size:17px; color:#929799; padding:45px 25px 35px 25px;
-webkit-transition: background-image 1s ease-in-out;
-moz-transition: background-image 1s ease-in-out;
-o-transition: background-image 1s ease-in-out;
transition: background-image 1s ease-in-out;
}
.nav>li>a:hover, .nav>li>a:focus{
background:url(http://cdn.myld.com.au/2/1198/web_total-gardens_9a0e4cf244.png) no-repeat top center; color:#38c867; }
background-image is a non-animatable property. You can not apply transitions.
I'm assuming you want to fade in the image on hover (?). A way to fake it is to apply your background image to a pseudo element and transition the opacity:
body {
padding-top: 50px;
}
nav>ul>li>a {
font-size: 17px;
color: #929799;
padding: 45px 25px 35px 25px;
position: relative;
}
nav>ul>li>a>span {
position: relative;
}
nav>ul>li>a:before {
content: "";
background: url(http://placehold.it/200x100) no-repeat top center;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
opacity: 0;
transition: opacity 1s ease-in-out;
}
nav>ul>li>a:hover:before,
nav>ul>li>a:focus:before {
opacity: 1;
}
<nav>
<ul>
<li><span>Products</span></li>
</ul>
</nav>
As #GabyakaG.Petrioli mentioned in the comments, your selectors are wrong and you have invalid HTML. Both are fixed in the above example
css transition opacity allow image to change values over a specified duration, animating the property changes
http://css3.bradshawenterprises.com/cfimg/
or try
transition: all 1s ease-in-out;
I’m trying to achieve some nice transition effects when hovering after a image.(a hover div to appear from the same direction as the mouse ).
Everything works fine except that the “hover in” transition is not in straight line but more like in a diagonal & fill kind of way.(in the example below the transition is from left: -378px; to left : 0px / top is 0).
Normal state:
<div class="hover_effect initial_hover slideFromLeft" style="display: block;">link aici</div>
Hover state (classes are removed and added via jQuery):
<div class="slideFromLeft hover_effect initial_hover slideLeft" style="display: block;">link aici</div>
I want the movement to be in a straight line like the hover out transition which works fine. Can you point me the bug ?
This is the html & css code:
<div class="portfolio-sample regular-portfolio coding-2 isotope-item" style="position: absolute; left: 0px; top: 0px; -webkit-transform: translate(0px, 0px);">
<img width="455" height="295" src="http://localhost/wp-content/uploads/2013/01/env0251-455x295.jpg" class="attachment-portfolio-two wp-post-image" alt="env025">
<div class="slideFromLeft hover_effect initial_hover slideLeft" style="display: block;">link aici</div>
<div class="custom_slider_shadow"></div>
</div>
Thank you!
.hover_effect{
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.initial_hover{
position: absolute;
background: rgba(75,75,75,0.7);
width: 378px;
height: 245px;
top: 260px;
}
.slideFromLeft {
top: 0px;
left: -378px;
}
.slideLeft {
left: 0px;
}
Answer :
OK i figure it out - it was because the initial_hover class was added after the slideFromLeft on hover. Once i reverse these it works as i expected
It is not linear because it is specified to be not linear. If you want a linear transition, you should change both ease-in-out and ease to linear in the styling for .hover_effect.