CSS :after hover Transition

Question

The HTML structure

<div id="small_gal">
    <div><img src="images1.jpg" /></div>
    <div><img src="images1.jpg" /></div>
    <div><img src="images1.jpg" /></div>
    <div><img src="images1.jpg" /></div>
    <div><img src="images1.jpg" /></div>
    <div><img src="images1.jpg" /></div>
    <div><img src="images1.jpg" /></div>
    <div><img src="images1.jpg" /></div>
</div>

The images are having dropshadows so border is not a solution, as it will be outside the image

enter image description here

The border is having transition and it works smoothly on FF but not in chrome or other browsers

Here is the code which I have used

#small_gal div:hover{cursor: pointer;}
#small_gal div:after {
    content: '';
    position: absolute;
    width: 112px;
    height: 81px;
    border: 3px solid #e27501;
    left: 9px; top: 9px;
    z-index: 9;

    opacity: 0;
    -webkit-transition: opacity 0.5s ease-in-out;
    -moz-transition: opacity 0.5s ease-in-out;
    -o-transition: opacity 0.5s ease-in-out;
    -ms-transition: opacity 0.5s ease-in-out;
    transition: opacity 0.5s ease-in-out;
}
#small_gal div:hover:after {
    opacity: 1;
}

Note:

#small_gal

is only the container each image is wrapped in a div so we can implement :after

Are you sure CSS transitions are even implemented in the browsers you use? http://www.quirksmode.org/ — marcgg, Sep 05 '11 at 10:33
Yes border fade effect is working fine on my firefox 6. Check top right 3 links, they are working in all browsers. — Aamir Mahmood, Sep 05 '11 at 10:36
@patt yes link is broken, I have removed it and added other details — Aamir Mahmood, Mar 06 '13 at 04:46

score 16 · Accepted Answer · answered Sep 05 '11 at 10:56

16

Firefox 4+ is the only browser that supports the transitioning of pseudo-elements such as :before and :after.

Source: http://css-tricks.com/13555-transitions-and-animations-on-css-generated-content/

answered Sep 05 '11 at 10:56

tw16

29,215
7
63
64

Ahh true, so what could be the alternate? I tried using jQuery but it is also a mess as keeping the orange border inside and over the image will cause mouseout event fired on image it self, so it creates a fluctuation effect and also not click able. – Aamir Mahmood Sep 05 '11 at 11:02

score 3 · Answer 2 · answered Sep 05 '11 at 11:00

3

CSS transitions are still experimental in WebKit so it's likely you've hit some edge-case bug involving the ::after pseudo-selector. I suggest avoiding it altogether and just transitioning border-color instead. This worked fine in Chrome and Safari:

#small_gal div.p {
    border: 2px solid transparent;
    -webkit-transition: border-color 1s ease-in;
}

#small_gal div.p:hover {
    border-color: orange;
}

answered Sep 05 '11 at 11:00

Matthew

15,464
2
37
31

Thank you for your feedback, I can use the border, but the image is having drop-shadow and white border inside the img, so applying any sort of border will add outside the shadow which is not desired – Aamir Mahmood Sep 05 '11 at 11:43

score 1 · Answer 3 · answered Dec 23 '15 at 18:05

You can use CSS transitions on pseudo elements like :before and :after if you can define the property on the element itself and use inherit in the pseudo element. So in your case instead of putting a transition on the opacity, you could put a transition on the border-color.

*, *:before, *:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

#small_gal div {
  border-color: transparent;
  cursor: pointer;
  display: inline-block;
  position: relative;
  -webkit-transition: border-color 0.5s ease-in-out;
  -moz-transition: border-color 0.5s ease-in-out;
  -o-transition: border-color 0.5s ease-in-out;
  -ms-transition: border-color 0.5s ease-in-out;
  transition: border-color 0.5s ease-in-out;
}
#small_gal div:after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  border-color: inherit;
  border-style: solid;
  border-width: 3px;
  left: 0;
  top: 0;
}
#small_gal div:hover {
  border-color: #e27501;
}
#small_gal div img {
  display: block;
  height: auto;
  max-width: 150px;
  width: auto;
}

<div id="small_gal">
    <div><img src="//c2.staticflickr.com/6/5826/23633880170_4bb8492de8_z.jpg" /></div>
    <div><img src="//c2.staticflickr.com/6/5826/23633880170_4bb8492de8_z.jpg" /></div>
    <div><img src="//c2.staticflickr.com/6/5826/23633880170_4bb8492de8_z.jpg" /></div>
    <div><img src="//c2.staticflickr.com/6/5826/23633880170_4bb8492de8_z.jpg" /></div>
    <div><img src="//c2.staticflickr.com/6/5826/23633880170_4bb8492de8_z.jpg" /></div>
</div>

CSS :after hover Transition

3 Answers3

Linked