CODEWITHSUNDEEP
htmlcss
Rian
Rian

Reputation: 25

Styling breaks after using anchor tag

I'm trying to put some images in a decorative way, however, I can't seem to get the code to work properly mainly on the CSS side. I'm pretty sure I'm doing something wrong with the selectors and was wondering if someone would be willing to take a look at it.

It seems that the code breaks when I add the <a> tag but I would really like to include the link to the images.

Broken code with <a> tag: JSFiddle

Working code without <a> for reference: JSFiddle

I'm hoping I can get the one with the <a> tag working.

.photos img {
  position: absolute;
  -webkit-transition: all 0.5s ease-out;
  -moz-transition: all 0.5s ease-out;
  -o-transition: all 0.5s ease-out;
  transition: all 0.5s ease-out;
  padding: 10px 10px 30px 10px;
  background: white;
  border: solid 1px black;
}

.photos img:nth-of-type(1) {
  left: 50px;
  top: 50px;
  -webkit-transform: rotate(5deg);
  -moz-transform: rotate(5deg);
  -o-transform: rotate(5deg);
  transform: rotate(5deg);
}

.photos img:nth-of-type(2) {
  left: 150px;
  top: 100px;
  -webkit-transform: rotate(-10deg);
  -moz-transform: rotate(-10deg);
  -o-transform: rotate(-10deg);
  transform: rotate(-10deg);
}

.photos img:nth-of-type(3) {
  left: 250px;
  top: 50px;
  -webkit-transform: rotate(7deg);
  -moz-transform: rotate(7deg);
  -o-transform: rotate(7deg);
  transform: rotate(7deg);
}

.photos img:nth-of-type(4) {
  left: 350px;
  top: 150px;
  -webkit-transform: rotate(-3deg);
  -moz-transform: rotate(-3deg);
  -o-transform: rotate(-3deg);
  transform: rotate(-3deg);
}

.photos img:nth-of-type(5) {
  left: 450px;
  top: 50px;
  -webkit-transform: rotate(2deg);
  -moz-transform: rotate(2deg);
  -o-transform: rotate(2deg);
  transform: rotate(2deg);
}

.photos img:hover {
  -webkit-transform: scale(1.5);
  -moz-transform: scale(1.5);
  -o-transform: scale(1.5);
  transform: scale(1.5);
  z-index: 10;
  -webkit-transform: rotate(380deg) scale(1.5);
  -moz-transform: rotate(380deg) scale(1.5);
  -o-transform: rotate(380deg) scale(1.5);
  transform: rotate(380deg) scale(1.5);
  z-index: 10;
}
<div class="photos"> 
    <a href="https://www.google.com/" target="_blank"><img src="https://lorempixel.com/160/220"/></a>
    <a href="https://www.google.com/" target="_blank"><img src="https://lorempixel.com/160/220"/></a>
    <a href="https://www.google.com/" target="_blank"><img src="https://lorempixel.com/160/220"/></a>
    <a href="https://www.google.com/" target="_blank"><img src="https://lorempixel.com/160/220"/></a>
    <a href="https://www.google.com/" target="_blank"><img src="https://lorempixel.com/160/220"/></a>
</div>

Upvotes: 0

Views: 42

Answers (1)

Jesse
Jesse

Reputation: 3622

You're using nth-of-type(1) to place the images, but because they are now children of anchor tags, they're all the first child. Therefore they will all be placed in the same location and get the .photos img:nth-of-type(1) CSS.

Try doing it like this instead:

.photos a:nth-of-type(1) img {
    left: 50px;
    top: 50px;
    -webkit-transform: rotate(5deg);
    -moz-transform: rotate(5deg);
    -o-transform: rotate(5deg);
    transform: rotate(5deg);
}

Full result: https://jsfiddle.net/kLnn2jLu/4/

Upvotes: 1

Related Questions