I am trying to tint images onHover. I have the css working but some of the images which have rounded edges or don't completely fill the parent show the black background:
(The far left has the mouse over it)
How can hide the black so only the img is tinted?
Here is my css:
.thumb {
width:150px;
height:150px;
margin: 0px 5px 14px 14px;
float:left;
display:inline;
background: black;
overflow:hidden;
cursor: pointer;
/*border: 2px solid #00A3C6; */
}
.thumb img {
display: block;
-webkit-transition: all 0.25s linear;
-moz-transition: all 0.25s linear;
-ms-transition: all 0.25s linear;
-o-transition: all 0.25s linear;
transition: all 0.25s linear;
}
.thumb:hover img {
opacity: 0.7;
}
If the image has rounded corners, you can use border-radius in your css to set rounded corners of the "tint" container.
If the actual image has a white border... you're kind of out of luck. You can crop images but you don't have any way to doing this dynamically for any kind of image.
How can hide the black so only the img is tinted?
Try removing background: black from .thumb ?
P.S. display: inline is also not needed there
Related
I am trying to scale up a linked image and reduce the opacity on hover. I have the image in a container to make it a circle with border-radius and the container has overflow set to hidden. I have everything working except that when I hover, the full image appears for a brief second before the overflow is hidden again. Here is a codepen mockup: http://codepen.io/jphogan/pen/WbxKJG
I have tried a few of the solutions I've found on here including setting the image to display:block. I've also tried setting the background color and overflow hidden to the container rather than the link, but I had the same result. I tried adding overflow hidden to the image itself, though unsurprisingly that did nothing. I just need the excess of the image to stay hidden throughout the transition.
Here is the CSS the way I have it set up now, although I've gone through a number of iterations to try and solve this. I appreciate any help. Thanks!
.solutions_role_container {
text-align:center;
}
.role_img_container {
width: 70%;
margin: 0 auto;
}
a.solutions_role_image {
background:#000;
border-radius: 50%;
overflow: hidden;
display: block;
border: 1px solid #B1C3DA;
box-shadow: 0 4px 10px #C6C6C6;
}
.solutions_role_image img {
width:100%;
-moz-transition: opacity 0.4s ease-in-out, transform 0.2s ease-in-out;
-o-transition: opacity 0.4s ease-in-out, transform 0.2s ease-in-out;
-webkit-transition: opacity 0.4s ease-in-out, transform 0.2s ease-in-out;
transition: opacity 0.4s ease-in-out, transform 0.2s ease-in-out;
display:block;
overflow:hidden;
transform:scale(1);
}
a.solutions_role_image:hover img {
opacity:0.7;
transform:scale(1.08);
}
Add these rules to role_img_container:
border-radius: 50%;
overflow: hidden;
z-index: 2;
position: relative;
The a and img tags should no longer need any css for overflow or border radius. You could add z-index: 1 to solutions_role_img just to be safe, but I don't think it is necessary
I am doing a transition where it fades into transparent white, when a user is hovering an image.
My problem is that I need to change the color, that it fades to, to black. I have tried just simply adding background:black; to the class that contains the transition, but it does not work unfurtunately, it's still fading into white transparent.
The css code I am using is:
.hover:hover {
opacity: 0.2;
}
.item-fade {
background: black;
opacity: 0.8;
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
}
<p>Hover image, the white opacity needs to be black :/</p>
<img src="//placehold.it/100x100" class="hover item-fade" />
Wrap your image with a span element with a black background.
.img-wrapper {
display: inline-block;
background: #000;
}
.item-fade {
vertical-align: top;
transition: opacity 0.3s;
opacity: 1;
}
.item-fade:hover {
opacity: 0.2;
}
<span class="img-wrapper">
<img class="item-fade" src="https://via.placeholder.com/100x100/cf5" />
</span>
It's not fading to "black transparent" or "white transparent". It's just showing whatever color is "behind" the image, which is not the image's background color - that color is completely hidden by the image.
If you want to fade to black(ish), you'll need a black container around the image. Something like:
.ctr {
margin: 0;
padding: 0;
background-color: black;
display: inline-block;
}
and
<div class="ctr"><img ... /></div>
http://jsfiddle.net/6xJQq/13/
.container {
display: inline-block;
padding: 5px; /*included padding to see background when img apacity is 100%*/
background-color: black;
opacity: 1;
}
.container:hover {
background-color: red;
}
img {
opacity: 1;
}
img:hover {
opacity: 0.7;
}
.transition {
transition: all .25s ease-in-out;
-moz-transition: all .25s ease-in-out;
-webkit-transition: all .25s ease-in-out;
}
Please note that the problem is not white color. It is because it is being transparent.
When an element is made transparent, all of its child element's opacity; alpha filter in IE 6 7 etc, is changed to the new value.
So you cannot say that it is white!
You can place an element above it, and change that element's transparency to 1 while changing the image's transparency to .2 or what so ever you want to.
I am a complete newbie when it comes to HTML and CSS and just building my very first website. I want to create an image that, when hovered, displays text and fades the image to a lower opacity. I've got the fade all worked out, as well as the opacity change. My only issue is that the text, which is contained within the element I want to fade, also fades and I would like to keep it at 100% opacity. I have tried setting opacity to 1 for the text but it does not override the opacity change of its container. For example, I have:
<div class="textbox">
<p class="boxtext">This is the text that will eventually go inside the box. It is blah lljsd iofu isduf iou eiosu dfi eiou sdiofu ioe soidfu oidu foiu foisu doiu eoiusodidfu oei osidfuosdiu ieu oisduf oiueoisu dfoi oiu soifu iod fioeo dfs.</p>
</div>
And also
div.textbox {
background-color: white;
margin-left: 2.5vw;
border: 2px solid lightgray;
width: 15vw;
height: 600px;
float: left;
}
div.textbox:hover {
background-color: lightgray;
border: 2px solid lightgray;
opacity: 0.5;
}
p.boxtext {
margin: 5% 5%;
}
This creates the hover that I want, but I can't keep the text opacity at 100%.
Edit: Thank you for providing the rgba() solution, this solves the problem. I have another case of the same problem except that there is a background image instead of a solid background color. Is there a similar workaround?
Edit2: Issues with fade breaking after replacing opacity change with a separate transparent .png.
a#imglink1 {
background-image: url('https://www.profilesinhistory.com/wp-content/uploads/2012/11/Apollo-11-NASA-Photograph-Signed-Neil-Armstrong-Michael-Collins-Buzz-Aldrin-200x200.jpg');
width: 200px;
height: 200px;
float: left;
-o-transition: 0.5s;
-ms-transition: 0.5s;
-moz-transition: 0.5s;
-webkit-transition: 0.5s;
transition: 0.5s;
}
a#imglink1:hover {
background-image: url('../images/apollo_transparent.png');
-o-transition: 1s;
-ms-transition: 1s;
-moz-transition: 1s;
-webkit-transition: 1s;
transition: 1s;
}
a#imglink1:hover p {
visibility: visible;
}
Since you're using a solid background color you can use rgba to only change the opacity of the background/borders and not affect the content inside. In your example:
div.textbox:hover {
background-color: rgba(222,222,222,.5);
border: 2px solid rgba(222,222,222,.5);
}
https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#rgba()
For images you can accomplish a fade using :before and :after and fading the opacity of those elements:
a#imglink2 {
width: 200px;
height: 200px;
float: left;
position: relative;
}
a#imglink2 p
{
position: relative;
z-index:2;
}
a#imglink2:before
{
background-image: url('http://images2.layoutsparks.com/1/239061/welcome-orange-vintage-design.gif');
width: 200px;
height: 200px;
position: absolute;
top:0; left:0;
content:'';
z-index:1;
opacity:1;
transition: .3s opacity linear;
}
a#imglink2:after
{
background-image: url('http://images.all-free-download.com/images/graphicmedium/vintage_christmas_background_32295.jpg');
width: 200px;
height: 200px;
position: absolute;
top:0; left:0;
content:'';
z-index:1;
opacity:0;
transition: .3s opacity linear;
}
a#imglink2:hover:before
{
opacity:0;
}
a#imglink2:hover:after
{
opacity:1;
}
http://codepen.io/seraphzz/pen/ikJqB
I'm trying to create a transition from a white background to an image background. This way when the viewer hovers over a section it goes from plain to styled.
Here's my current code:
div.camp {
background: #FFFFFF;
border: 1px solid #CCCCCC;
border-radius: 8px;
padding: 8px;
transition: all 1s linear 0s;
}
div.camp:hover {
background: #EFFFD5 url("http://www.alpinejosh.com/host/sp/images/camp.png");
background-position: center bottom;
background-repeat: repeat-x;
border: 1px solid #CECECE;
}
Here's the page this code is on: http://www.summitpost.org/eldorado-peak/150316#chapter_7
From what I understand it's easy to have background colors transition. But it seems as though background images are not supported for transition.
Unfortunately you cannot use transition on background images in the way you've specified. You can see the W3C list of animation property types here.
You could potentially lay your white background over the top, then animate its opacity on hover (to show the image beneath).
Code Sample
You could obviously make this prettier. I've just cobbled something together to give you an idea.
div.camp {
border: 1px solid #CCCCCC;
background: #EFFFD5 url("http://www.alpinejosh.com/host/sp/images/camp.png");
background-position: center bottom;
background-repeat: repeat-x;
border-radius: 8px;
position: relative;
}
div.camp-overlay {
padding: 8px;
border-radius: 8px;
position: absolute;
z-index:50;
width: 100%;
height: 100%;
background:white;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
div.camp-overlay:hover {
background: rgba(255,255,255,0); /* use opacity for older browsers*/
}
HTML for the above CSS
<div class="camp">
<div class="camp-overlay"></div>
</div>
JSFiddle of the above
http://jsfiddle.net/p7mcy/
What you could do is make two div elements, one on top of the other, and fade top div out on hover.
<div class="wrapper">
<div class="image"></div>
<div class="white-bg"></div>
</div>
.wrapper{position:relative;}
.image, .white-bg{position:absolute; top:0; left:0; width:100px; height:50px;}
.image{background:red;}
.white-bg{background:white; z-index:9999; -webkit-transition:opacity 0.3s linear; opacity:1;}
.white-bg:hover{opacity:0;}
Should work
fiddle: http://jsfiddle.net/b46z8/5/
This is the background image:
#logo
{background-image:url('logo.png');width:20px;height:23px;}
#logo:hover
{background-position:0 -23px;-webkit-transition: all 0.5s ease;}
#logo span
{margin-left:-3000px;}
<div id="logo"><span>logo</span></div>
This code gives me a slide effect (a vertical slide from the black S to the pink one) instead of the fade effect I'm looking for. Creating two images, would solve the issue, but that is not possible in this case.
How do I get the fade affect when using only one single image?
Try this - http://jsfiddle.net/Wds5z/4/
a, #logo {
background: url('http://i.stack.imgur.com/w5ZnN.png') 0 -23px;
width: 20px;
height: 23px;
display: block;
}
#logo {
background-position: 0 0;
-webkit-transition: opacity .5s linear;
-moz-transition: opacity .5s linear;
transition: opacity .5s linear;
}
#logo:hover {
opacity: 0;
}
#logo span {
margin-left:-3000px;
}