When you hover over an image the surface of the image will become grey and text appears. This effect works in both chrome and safari but when I tried it in Mozilla Firefox, the grey area appears only as a little square box up in the left corner. I can't figure out why, so hopefully someone here can spot the cause of the problem.
This is the CSS that I use. As you can see I've added the moz-transition.
span.text-content span {
display: table-cell;
text-align: center;
vertical-align: middle;
}
span.text-content {
background: rgba(0,0,0,0.5);
color: white;
cursor: pointer;
display: table;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
opacity: 0;
}
ul.img-list li:hover span.text-content {
opacity: 1;
}
span.text-content {
background: rgba(0,0,0,0.5);
color: white;
cursor: pointer;
display: table;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
opacity: 0;
-webkit-transition: opacity 500ms;
-moz-transition: opacity 500ms;
-o-transition: opacity 500ms;
transition: opacity 500ms;
}
Related
I've consulted these similar questions, 1, 2, 3, 4, but couldn't find the solution to my problem.
I have a simple play button and semi-transparent div transition when hovering over a block-level link which is placed over an image.
The problem is that the divs jitter when moving the mouse vertically over the image.
There are two exceptions to this behavior (in which case, the transition and div behavior run smoothly):
Moving the cursor vertically and parallel to
<span class="play">
and moving the mouse horizontally across the div.
/*------- Media Play Button -------*/
.vThumb {
position: relative;
width: 100%;
height: auto;
font-size: 0;
}
.vThumb img {
position: relative;
width: 100%;
display: block;
z-index: -1;
opacity: .5;
}
.vThumb a {
position: absolute;
top: 0;
display: block;
width: 100%;
height: 100%;
text-align: center;
text-decoration: none;
}
.vThumb a .play,
.vThumb a .vOverlay {
opacity: 0;
}
.vThumb a:hover .play {
position: relative;
font-size: 14vw;
color: #f00;
top: 50%;
transform: translateY(-50%);
z-index: 1001;
opacity: .95;
border: none;
display: block;
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
}
.vThumb a:hover ~ .vOverlay {
position: absolute;
top: 0;
width: 100%;
height: 100%;
background-color: #f00;
opacity: .3;
z-index: 1000;
display: inline-block;
transition: opacity .15s ease-in-out;
-moz-transition: opacity .15s ease-in-out;
-webkit-transition: opacity .15s ease-in-out;
}
/*------- End Media Play Button -------*/
<div class="vThumb">
<a href="#">
<span class="play">►</span>
</a>
<div class="vOverlay">
</div>
<img src="http://i.imgur.com/wZzgmVt.jpg">
</div>
Unlike the similar questions mentioned above nothing here is changing size and the issue occurs across all browsers. What am I doing wrong?
The reason you're seeing the flickering is because of the selector .vThumb a:hover ~ .vOverlay.
You are only applying styling to the .vOverlay element when hovering over the previous a element. When the .vOverlay element appears, it is positioned over the a element (which means that you are no longer hovering over the a element), resulting in it disappearing and repeating again.
You can easily prevent this by applying the styling when hovering over .vOverlay as well (rather than only applying it when hovering over the a element).
In other words, you want the following:
.vThumb a:hover ~ .vOverlay,
.vOverlay:hover {
/* ... */
}
However, that will result in the play button not being visible (since you are no longer hovering over the a element either).
You can resolve this by changing the selector .vThumb a:hover .play to .vThumb:hover .play.
Updated Example:
.vThumb {
position: relative;
width: 100%;
height: auto;
font-size: 0;
}
.vThumb img {
position: relative;
width: 100%;
display: block;
z-index: -1;
opacity: .5;
}
.vThumb a {
position: absolute;
top: 0;
display: block;
width: 100%;
height: 100%;
text-align: center;
text-decoration: none;
}
.vThumb a .play,
.vThumb a .vOverlay {
opacity: 0;
}
.vThumb:hover .play {
position: relative;
font-size: 14vw;
color: #f00;
top: 50%;
transform: translateY(-50%);
z-index: 1001;
opacity: .95;
border: none;
display: block;
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
}
.vThumb a:hover ~ .vOverlay,
.vOverlay:hover {
position: absolute;
top: 0;
width: 100%;
height: 100%;
background-color: #f00;
opacity: .3;
z-index: 1000;
display: inline-block;
transition: opacity .15s ease-in-out;
-moz-transition: opacity .15s ease-in-out;
-webkit-transition: opacity .15s ease-in-out;
}
<div class="vThumb">
<a href="#">
<span class="play">►</span>
</a>
<div class="vOverlay"></div>
<img src="http://i.imgur.com/wZzgmVt.jpg">
</div>
I'm using the Instafeed.js plugin and trying to style the "likes" hover overlay to fill the entire image box, however, I'm struggling to set the height to 100%.
I'm trying to avoid setting the container's height to a pixel value since the entire plugin is currently responsive.
I've looked around and tried different combinations of display and position values, but it's been mostly trial and error.
CSS:
#instafeed {
width: 100%;
margin-bottom: 80px;
}
#instafeed a {
position: relative;
}
#instafeed .ig-photo {
width: 25%;
vertical-align: middle;
}
#instafeed .likes {
width: 100%;
height: auto;
top: 0;
left: 0;
right: 0;
position: absolute;
background: #f18a21;
opacity: 0;
font-family: 'LinotypeUniversW01-Thin_723604', Arial, sans-serif;
font-size: 28px;
color: #ffffff;
line-height: 100%;
text-align: center;
text-shadow: 0 1px rgba(0, 0, 0, 0.5);
-webkit-font-smoothing: antialiased;
-webkit-transition: opacity 100ms ease;
-moz-transition: opacity 100ms ease;
-o-transition: opacity 100ms ease;
-ms-transition: opacity 100ms ease;
transition: opacity 100ms ease;
}
#instafeed a:hover .likes {
opacity: 0.8;
}
Demo: http://jsfiddle.net/rc1wj5t9/
Any help/advice would be appreciated!
It's because the anchor elements are inline by default, which means that they are not inheriting the height of their children img elements.
One possible solution is to set the display of the anchor elements to inline-block, and specify a width of 25%. Then for the children img elements, set a max-width of 100%:
Updated Example
#instafeed a {
position: relative;
display: inline-block;
max-width: 25%;
}
#instafeed .ig-photo {
max-width: 100%;
vertical-align: middle;
}
#instafeed .likes {
width: 100%;
height: auto;
top: 0; right: 0;
bottom: 0; left: 0;
}
To center the text, I used one of the techniques for vertically/horizontally centering text from one of my previous answers.
#instafeed .likes > span {
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
white-space: nowrap;
}
Here is how I fixed it.
CSS
#instafeed {
width: 100%;
margin:0px;
}
#instafeed a {
position: relative;
display:inline-block;
float:left;
width: 25%;
}
#instafeed .ig-photo {
width: 100%;
vertical-align: middle;
}
#instafeed .likes {
position: absolute;
width: 100%;
opacity: 0;
font-family: 'LinotypeUniversW01-Thin_723604', Arial, sans-serif;
font-size: 28px;
color: #ffffff;
text-align: center;
top: 50%;
transform: translateY(-50%);
text-shadow: 0 1px rgba(0,0,0,0.5);
-webkit-font-smoothing: antialiased;
-webkit-transition: opacity 100ms ease;
-moz-transition: opacity 100ms ease;
-o-transition: opacity 100ms ease;
-ms-transition: opacity 100ms ease;
transition: opacity 100ms ease;
z-index:10;
}
#instafeed a:hover .likes {
opacity: 1;
}
#instafeed a:hover::after{
content:"";
position:absolute;
width: 100%;
height: 100%;
top: 0; left: 0;
background: #f18a21;
opacity:0.7;
z-index: 5;
}
updated fiddle
I'm trying to edit a link with icon to fade between colors. I'm using :before for background image which is a sprite, because I couldn't figure how to change the color of the icon using only css when it's only png file.
I found this post which might be an answer( CSS3 - Fade between 'background-position' of a sprite image) and tried to modify it to my needs but it's not working...
Here's the code and the codepen demo in action (http://codepen.io/kikibres/pen/KpjZKM):
HTML
<div id="button">Button</div>
CSS
#button{
display: block;
}
#button a {
font-size: 30px;
font-weight: 700;
letter-spacing: 1;
color: #121e34;
text-decoration: none;
vertical-align: middle;
display: inline-block;
transition: color 0.4s ease;
}
#button a:hover {
color: #f68e07;
}
#button a:before {
content: "";
display: inline-block;
vertical-align: middle;
/*float: left;*/
background-image: url('http://www.dagrafixdesigns.com/Templates/DA-2011/DA-2013/Nike_13/img/mobile.png');
background-position: 0 0px;
background-repeat: no-repeat;
width: 30px;
height: 30px;
transition: opacity 0.4s ease-in-out;
-moz-transition: opacity 0.4s ease-in-out;
-webkit-transition: opacity 0.4s ease-in-out;
-o-transition: opacity 0.4s ease-in-out;
}
#button a:hover:before{
content: "";
background-image: url('http://www.dagrafixdesigns.com/Templates/DA-2011/DA-2013/Nike_13/img/mobile.png');
background-position: 0 -29px;
background-repeat: no-repeat;
width: 30px;
height: 30px;
display: inline-block;
/*text-indent: -9999px;*/
/*transition: opacity 0.4s ease-in-out;
-moz-transition: opacity 0.4s ease-in-out;
-webkit-transition: opacity 0.4s ease-in-out;
-o-transition: opacity 0.4s ease-in-out;*/
opacity: 0;
}
/*#button a:hover:before
{
opacity: 0.4;
}*/
How do I fix it so that it'll fade from one color to another...
* Update *
With some help from others (thanks, everyone!), I was able to edit the code. However, it doesn't line up in the middle like I wanted. Here's the actual link that I'm using for a website. The first code displayed was just an example to see how I can make it work. Anyway, I finally separated the icon and the text by using span, but now I'm trying to tie them together by using "+" in the css, but it's not working. Here's the codepen code: http://codepen.io/kikibres/pen/GJbQKq
HTML
<div id="button"><span></span>Free Consultation</div>
CSS
body {
background-color: #121e34;
}
#button{
display: block;
width: 100%;
}
#button a {
display: inline-block;
position: relative;
/*text-indent: 80px;*/
/*width: 100%;
height: 52px;*/
/*background: url(http://i.imgur.com/32k8ugR.png) no-repeat;*/
text-decoration: none;
text-transform: uppercase;
font-size: 30px;
font-weight: 700;
letter-spacing: 1;
color: #fff;
vertical-align: middle;
transition: color 0.4s ease;
}
#button a:hover {
color: #f68e07;
}
#button a span {
position: relative;
display: inline-block;
/*top: 0; left: 0; bottom: 0; right: 0;*/
background: url(http://i.imgur.com/32k8ugR.png) no-repeat;
width: 66px;
height: 52px;
margin-right: 15px;
vertical-align: middle;
}
#button a span:before {
content: "";
/*display: inline-block;*/
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
background: url(http://i.imgur.com/32k8ugR.png) no-repeat;
background-position: 0 -52px;
opacity: 0;
-webkit-transition: opacity 0.5s;
-moz-transition: opacity 0.5s;
-o-transition: opacity 0.5s;
}
#button a span:hover:before {
opacity: 1;
}
As you can see from this new codepen code, if you hover over the icon, both the icon and the text work, but if you hover over the text, only the text works. How do I fix it?
You've to apply the different image styles on different DOM elements, once it's the anchor tag and the second one is the span (in my example), and then switch the opacity of the different positioned background. CodePen Link
SNIPPET
.button {
display: inline-block;
position: relative;
text-indent: 30px;
width: 36px;
height: 30px;
background: url(http://www.dagrafixdesigns.com/Templates/DA-2011/DA-2013/Nike_13/img/mobile.png) no-repeat;
text-decoration: none;
font-size: 1.5em;
transition: color 0.4s ease;
line-height:1.5em;
}
.button:hover{
color:#f68e07;
}
.button span {
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
background: url(http://www.dagrafixdesigns.com/Templates/DA-2011/DA-2013/Nike_13/img/mobile.png) no-repeat;
background-position: 0 -29px;
opacity: 0;
-webkit-transition: opacity 0.5s;
-moz-transition: opacity 0.5s;
-o-transition: opacity 0.5s;
}
.button:hover span {
opacity: 1;
}
Button<span></span>
To change the color, you can incorporate a CSS transition with a -webkit-filter where when something happens you would invoke the -webkit-filter of your choice. For example:
img {
-webkit-filter:grayscale(0%);
transition: -webkit-filter .3s linear;
}
img:hover
{
-webkit-filter:grayscale(75%);
}
You have declared opacity: 0; for #button a:hover:before { ... }, that's why it doesn't work in your codepen demo.
I got it!!! Thanks everyone for their help! I was able to make it work!!!
Here's working codepen: http://codepen.io/kikibres/pen/LVKQxE
HTML
<div id="button"><span></span>Free Consultation</div>
CSS
body {
background-color: #121e34;
}
#button{
display: block;
width: 100%;
}
#button a {
display: inline-block;
position: relative;
text-decoration: none;
text-transform: uppercase;
font-size: 30px;
font-weight: 700;
letter-spacing: 1;
color: #fff;
vertical-align: middle;
transition: color 0.4s ease;
}
#button a span {
position: relative;
display: inline-block;
background: url(http://i.imgur.com/32k8ugR.png) no-repeat;
width: 66px;
height: 52px;
margin-right: 15px;
vertical-align: middle;
}
#button a span:before {
content: "";
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
background: url(http://i.imgur.com/32k8ugR.png) no-repeat;
background-position: 0 -52px;
opacity: 0;
-webkit-transition: opacity 0.5s;
-moz-transition: opacity 0.5s;
-o-transition: opacity 0.5s;
}
#button:hover a {
color: #f68e07;
}
#button:hover a span:before {
opacity: 1;
}
I am using a simple :hover:after in CSS to create a dark overlay on top of a div. I also am using transition property to make it fade in and out instead of simply appearing and disappearing.
Now, fading in it does brilliantly, but fading out, on the other hand, doesn't. It simply disappears as if there never was no transition to being with.
Here's the simplified code:
HTML:
<div class="innerImg"></div>
CSS(full code):
.innerImg {
float: left;
height: 74%;
background-image: url("../images/an_image.jpg");
background-size: 100%;
background-repeat: no-repeat;
width: 100%;
border-bottom: 1px solid #9F9F9F;
transition: all .2s ease;
overflow: hidden;
position: relative;
}
.innerImg:hover {
border-color: #F8CE26;
transition: all .2s ease;
}
.innerImg:after {
transition: all .2s ease;
content: "";
}
.innerImg:hover:after {
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 10;
background-color: rgba(0,0,0,0.7);
cursor: pointer;
transition: all .2s ease;
}
In desperation, I applied transition everywhere, but still, there were no changes. Originally, just putting it inside .innerImg and .innerImg:after was enough. In fact, it didn't work until I created just :after and gave that transition.
Anything stupid I'm missing here?
This is happening because you placed all the CSS properties that define the object's size on the hover selector. So when you aren't hovering over it, it has no size (and it disappears instantly).
What it looks like when not being hovered over:
What it should look like:
To fix, just move all of the size/layout properties from .innerImg:hover:after to .innerImg:after.
.innerImg:after {
display: block;
transition: all .2s ease;
content:"";
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 10;
cursor: pointer;
}
.innerImg:hover:after {
background-color: rgba(0, 0, 0, 0.7);
}
Demo (I slowed down the animation so it's easier to see):
.innerImg {
float: left;
height: 74%;
background-image: url("../images/an_image.jpg");
background-size: 100%;
background-repeat: no-repeat;
width: 100%;
border-bottom: 1px solid #9F9F9F;
transition: all .5s ease;
overflow: hidden;
position: relative;
}
.innerImg:hover {
border-color: #F8CE26;
transition: all .5s ease;
}
.innerImg:after {
display: block;
transition: all .5s ease;
content: "";
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 10;
cursor: pointer;
}
.innerImg:hover:after {
background-color: rgba(0, 0, 0, 0.7);
}
<div class="innerImg">Hover over me!</div>
I am looking for a solution to create an image hover effect and keeping the image same height as widht at the same time. Here is my code right now:
.kozossegitag {
content: "";
display: block;
width: 100%;
padding-top: 100%;
background: url(http://www.kaptarcoworking.hu/wp-content/uploads/2015/07/koren_miklos.jpg);
background-size: cover;
overflow: hidden
}
.reszletek {
width: 100%;
padding-top: 100;
background-color: rgba(67,85,103,0.7);
opacity: 0;
}
.kozossegitag:hover .reszletek {
background-color: rgba(67,85,103,0.5);
opacity: 1;
-webkit-transition: opacity .25s ease;
-moz-transition: opacity .25s ease;
}
<div class="kozossegitag">
<div class="reszletek">
<span>Koren Miklós</span>
</div>
</div>
My goal is to cover the whole image with this pastel blue color and place the text right on the image. As you see here (the left one is without hover, the right one is with):
Many thanks for every help!
Cheers,
Pepe
Add this to your css:
.kozossegitag:hover{
background-color: lightblue;
background-blend-mode: multiply;
}
Here is the JSFiddle demo
It's not overly neat, as it's a little rushed but you get the idea. I used position absolute and some pseudo elements to create what I think you're trying to achieve.
CSS:
.kozossegitag {
display: block;
width: 100%;
background: url(http://www.kaptarcoworking.hu/wp-content/uploads/2015/07/koren_miklos.jpg);
background-size: cover;
overflow: hidden;
position: relative;
}
/* give the div the ratio height */
.kozossegitag::after {
content: "";
padding-top: 100%;
display: block;
}
.reszletek {
width: 100%;
opacity: 0;
}
.kozossegitag:hover .reszletek {
opacity: 1;
-webkit-transition: opacity .25s ease;
-moz-transition: opacity .25s ease;
z-index: 10;
position: relative;
}
/* overlay the light blue using ::before */
.kozossegitag:hover::before {
content: "";
background-color: rgba(67, 85, 103, 0.7);
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 0;
}
Working example.
By positioning .kozossegitag relatively, you can position .reszletek absolutely right over top of it by setting width and height to 100% and top and left to 0.
You also forgot to set height to 0 on .kozossegitag to keep it square;
.kozossegitag {
height:0;
position:relative;
content: "";
display: block;
width: 100%;
padding-top: 100%;
background: url(http://www.kaptarcoworking.hu/wp-content/uploads/2015/07/koren_miklos.jpg);
background-size: cover;
overflow: hidden
}
.reszletek {
position:absolute;
width: 100%;
height: 100%;
top:0;
left:0;
background-color: rgba(67,85,103,0.7);
opacity: 0;
}
.kozossegitag:hover .reszletek {
background-color: rgba(67,85,103,0.5);
opacity: 1;
-webkit-transition: opacity .25s ease;
-moz-transition: opacity .25s ease;
}
Fiddle: http://jsfiddle.net/trex005/rpafw24q/