CODEWITHSUNDEEP
htmlcss
Ronnie
Ronnie

Reputation: 93

How To Style background-image CSS

Hello I am trying to figure how I can style an image that I have loaded with CSS, I did this by using the code:

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

I then tried to style this by doing:

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

I then also tried:

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

Upvotes: 2

Views: 4374

Answers (2)

bob
bob

Reputation: 993

If you are trying to set the background image in CSS you should set the image use the background property.

.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>

Upvotes: 3

Ouroborus
Ouroborus

Reputation: 16875

Background images and content images are not separate elements, they are styling of the element they're declared on.

For example, rather than using:

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

You would use:

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

If you actually want to style the image separately from the element, the image will have to have it's own element. This could be in the form of an inner img element, or by placing the image as the background of some other inner element.

Upvotes: 1

Related Questions