Hola, estoy tratando de averiguar cómo puedo diseñar una imagen que cargué con CSS, lo hice usando el código:

.news1 {
content: url("https://i.vimeocdn.com/portrait/58832_300x300");
}

Luego intenté diseñar esto haciendo:

.news1 img:hover {
 -moz-transform: scale(1.1);
 -webkit-transform: scale(1.1);
  transform: scale(1.1);
}

Luego también probé:

 .news1 content:hover {
     -moz-transform: scale(1.1);
     -webkit-transform: scale(1.1);
      transform: scale(1.1);
    }
2
Ronnie 15 dic. 2016 a las 03:13

2 respuestas

La mejor respuesta

Si está intentando configurar la imagen de fondo en CSS, debe configurar la imagen con la propiedad background.

.news1 {
  background-image: url("https://i.vimeocdn.com/portrait/58832_300x300");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  height:300px;
  width: 300px;
  transition: all .4s ease;
}

.news1:hover {
  transform: scale(1.1);
}
<div class="news1"></div>
3
bob 15 dic. 2016 a las 00:24

Las imágenes de fondo y las imágenes de contenido no son elementos separados, son el estilo del elemento en el que están declaradas.

Por ejemplo, en lugar de usar:

.news1 img:hover {
  /* ... */
}

Usarías:

.news1:hover {
  /* ... */
}

Si realmente desea diseñar la imagen por separado del elemento, la imagen deberá tener su propio elemento. Esto podría ser en forma de un elemento img interno, o colocando la imagen como fondo de algún otro elemento interno.

1
Ouroborus 15 dic. 2016 a las 00:16