[SOLUCIONADO] Problema con transition en img, no reconoce after y after:hover

[lepe]

Hola gente

Estoy intentando añadir un efecto shadow al pasar el cursor sobre una imagen que está en varias capas, el problema es que la imagen no reconoce las clases :after y after:hover. Les comparto las pruebas que hice:

#shad {
position: relative; }
#shad:after {
background: rgba(255, 255, 255, 0.1) none repeat scroll 0 0;
transition: all 0.8s ease-in-out 0s;
display: inline-block;
position: absolute;
right: 170px;
width: 300px;
height: 152px;
content: "";
top: 17px; }
#shad:hover::after {
right: -465px;
transition: all 0.8s ease-in-out 0s; }

Con está clase meto la id como sigue:

<div class="product-image-container">
<a id="shad" class="product_img_link" href="#" title="xxxx">
<img src="xxx.jpg" class="replace-2x img-responsive" height="135" width="180">
</a>
</div>

----------------------
Luego lo intenté de la siguiente manera:

.shad img {
position: relative; }
.shad:after img {
background: rgba(255, 255, 255, 0.1) none repeat scroll 0 0;
transition: all 0.8s ease-in-out 0s;
display: inline-block;
position: absolute;
right: 170px;
width: 300px;
height: 152px;
content: "";
top: 17px; }
.shad:hover::after img {
right: -465px;
transition: all 0.8s ease-in-out 0s; }

<div class="product-image-container">
<a class="product_img_link" href="#" title="xxxx">
<img src="xxx.jpg" class="replace-2x img-responsive shad" height="135" width="180">
</a>
</div>
----------------

Al hacer hover sobre la imagen no reconoce las clases de ninguna manera. Lo he intentado hacerlo sobre los divs y si funciona, el problema es que ello no me sirve porque coge la anchura de todo el div y si le pongo un "overflow:hidden" entonces otros span anteriores al div que necesito que se muestren fuera del overflow se recortan

¿Alguna sugerencia para que las clases :after y :hover::after me las reconozca la img?

saludos y gracias

[ArturoGallegos]

de que color es tu fondo?

He probado tu primer ejemplo y si funciona, el detalle esta en que el fondo es blanco y el objeto :after también es blanco por ende no es visible.

[lepe]

hola perdona por la opción uno que aporté para tampoco me sirve ya que el shadow se me sale del width de la img y si añado un overflow:hidden a cualquiera de los divs anteriores tampoco consigo mucho.

Menciono el codigo completo:

Código:

<li class="ajax_block_product col-xs-12 col-sm-6 col-md-4 first-item-of-tablet-line">
  <div class="clase_con_imagen_de_fondo" itemscope="" itemtype="https://schema.org/Product">			
    <div class="left-block">
      <div class="product-image-container">
      <a class="product_img_link" href="#" title="xxxx">
      <img src="xxx.jpg" class="shad" height="135" width="180">
      </a>
    </div>
  </div>
</li>

El color de fondo es un imagen cubica blanca sombreada, esta añadida en el css del primer div que menciono en el quote

¿Saben que propiedad añadir al img para que me lea la class?

[ArturoGallegos]

Hasta donde se la etiqueta IMG, no tiene soporte para los pseudo elementos before y after

Por lo cual no puedes darle esas propiedades, en todo caso has de añadir otro div que la contenga y si le puedas dar el overflow que necesitas.

[Rafael]

Yo la realidad es de que no he probado tu código, solo quiero hacer notar la lógica.

<div class="product-image-container">
- <a>
- <img>
- </a>
</div>

El codigo acaba siendo bastante simple:

Código CSS:

.product-image-container > a > img {
    box-shadow: 0px 0px 0px #888888;
    transition: all .3s ease-in-out;}
 
.product-image-container > a > img:hover {
    box-shadow: 10px 10px 5px #888888;
    transition: all .3s ease-in-out;}
 

Repito el código para la transición de ida y vuelta.

[lepe]

Iniciado por Rafael

Yo la realidad es de que no he probado tu código, solo quiero hacer notar la lógica.

<div class="product-image-container">
- <a>
- <img>
- </a>
</div>

El codigo acaba siendo bastante simple:

Código CSS:

.product-image-container > a > img {
    box-shadow: 0px 0px 0px #888888;
    transition: all .3s ease-in-out;}
 
.product-image-container > a > img:hover {
    box-shadow: 10px 10px 5px #888888;
    transition: all .3s ease-in-out;}
 

Repito el código para la transición de ida y vuelta.

HOla buenas

Creo que como dice ArturoGallegos el problema está en que el after y before no funcionará nunca en un img. Añadí a tu codigo los siguiente pero no funcionó tampoco.

Código CSS:

.product-image-container > a > img {
    position: relative; }
.product-image-container > a:after > img {
    background: rgba(255, 255, 255, 0.2) none repeat scroll 0 0;
  transition: all 0.8s ease-in-out 0s;
  display: inline-block;
  position: absolute;
  right: -113px;
  width: 200px;
  height: 352px;
  content: "";
  top: -107px;}
 
.product-image-container > a:hover::after > img {
      transition: all 0.8s ease-in-out 0s;
  right: -140px;
  width: 0;}
 

Y si no se añade el before o after tengo mis dudas de que pueda funcionar la transición que va de izquierda a derecha en la img con la transparencia rgba(255, 255, 255, 0.2), el box shadow no es el efecto deseado.

Para que podais entender lo que intentó es el ejemplo del boton ubicado arriba a la derecha que tiene el efecto de izquierda a derecha, la diferencia a ese ejemplo es que yo lo deseo aplicar a una etiqueta img con un opacity a 0.2
https://tympanus.net/Development/CreativeButtons/

saludos

[lepe]

Hola rafael

siguiendo la lógica de tu ejemplo, he intentado hacerlo sin after ni before y usando en su lugar el hover, casí he conseguido el efecto deseado, apreciaciones:

PROS
Toma la anchura deseada de solo la anchura de la img
CONTRA
Solo consigo ver el efecto por fuera de la img gracias al padding de 20px, el efecto deseado funciona pero por detras de la img y si le aplico un z-index superior no consigo que el efecto se sobreponga sobre la imagen absolutamente

Código CSS:

.product-image-container > a > img {
  padding:20px;
  display: block;
  background-image: linear-gradient(to left,
                                    transparent,
                                    transparent 50%,
                                    #00c6ff 50%,
                                    #00c6ff);
  background-position: 100% 0;
  background-size: 200% 100%;
  transition: all .25s ease-in; }
 
.product-image-container > a > img:hover {
  background-position: 0 0; }
 

¿Alguna sugerencia de codigo para que el efecto se vea por encima de la imagen?


NOTA: tengo en el css otras capas que quizas podrían interferir en el css, las expongo a continuación:

Código CSS:

ul.product_list .product-image-container {
  text-align: center; }
  ul.product_list .product-image-container img {
    position: relative;
    margin: 0 auto;
    top: 21px; }
 

saludos

[ArturoGallegos]

Quizas lo que buscas es algo como esto

[JSFIDDLE="https://jsfiddle.net/arturogallegos/02cah7tx/"][/JSFIDDLE]

[Rafael]

@ArturoGallegos, ¿Hay alguna forma de compilar el sass directamente en el JsFiddle?

[Rafael]

Por otro lado, justamente yo estoy trabajando en algo similar.

Mi lógica es la siguiente:

Código HTML:

<div class="product-image-container">
    <img><a>Texto encima de la imagen</a>
</div>
 

Por una razón. Quiero tener la posibilidad de que aparezca un texto explicativo de la sección.

La lógica del css:

1) El div me define el ancho de mi caja.
2) La imagen va del 100% del ancho del contenedor y define el alto proporcionalmente.
3) El <a> crecerá al alto definido por la imagen, y el ancho definido por la caja.

Código CSS:

.product-image-container {
width: 200px;
position: relative;}
.product-image-container img {width: 100%;}
 
.product-image-container {width: 100%;
height: 100%;
position: absolute:
top: 0;}
 

Y el efecto de sombra etc, se lo doy a toda la caja

Código CSS:

.product-image-container {box-shadow: 5px 5px 5px #000;}
 

Esto me da independencia a hacer efectos al link encima o a toda la caja.

[ArturoGallegos]

Así es Rafael, en las opciones de CSS le das click y puedes seleccionar como lenguaje SCSS que vendría siendo SASS

y con relación a lo que mencionas con texto yo lo realizo así.
https://jsfiddle.net/arturogallegos/02cah7tx/1/

[lepe]

Excelentes aportes ArturoGallegos, he probado ambas opciones y funcionan a la perfección después de quitarles el position relative en mi caso,

Saludos y gracias