Edit div with after selector in html

Question

I've been learning about the :after selector, and I wanted to create a nice looking gallery.

I've made the thumbnail I want for the gallery. Currently my thumbnail only works with an :after selector.

However instead of making each individual thumbnail its own class, I want to be able to set the background image in the HTML file.

I want to know what the best way to accomplish this.

body{
  font-family: Arial, sans-serif;
}
a, a:hover, a:focus{
  text-decoration: none;
  color: #fff;
}
.thumbnailouterwrap{
  width: 250px;
  height: 250px;
}
.imgthumbnail{
  text-align: center;
  width: 100%;
  height: 100%;
  background-color: transparent;
  color: #ffffff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  opacity: 1;
  position: relative;

}
.imgthumbnail:after{
  content:'';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("http://doc.jsfiddle.net/_downloads/jsfiddle-logo.png");
  background-size: cover;
  background-position: center;
  transition: 500ms all ease-in-out;

}

.thumbnailinnerwrap{
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: #1d1d1d;
}
.thumbtext{
  opacity: 0;
  transition: 500ms all ease-in-out;
  transform: scale(1, 1);
  z-index: 1;
}
.imgthumbnail hr{
  width: 0%;
  border-top: solid 1px #fff;
  transition: 800ms all ease-in-out;
}

.imgthumbnail:hover .thumbtext, .thumbtext:hover{
  opacity: 1;
}
.imgthumbnail:hover hr, hr:hover{
  width: 100%;
}
.imgthumbnail:hover:after{
  transform: scale(1.2, 1.2);
  opacity: 0.7;
  filter: blur(2px);
}

<body>
  <div class="thumbnailouterwrap">
    <a href="http://jsfiddle.net" class="anchorthumb">
      <div class="thumbnailinnerwrap">
        <div class="imgthumbnail">
          <div class="thumbtext">
            <h3>Title</h3>
            <hr/>
            <p>Description</p>
          </div>
        </div>
      </div>
    </a>
  </div>

</body>

JsFiddle

Sorry if this isn't clear, or if this post is bad (it's my first)

long-lazuli · Answer 1 · 2015-11-22T14:53:20.123

If I understand correctly, you want to style a parent element with the image of the child.

What you can do is setting the background-image of .parentSelector, but put a background-size of 0.
Then you inherit this background-image in .childSelector, and put a larger background-size.

div {
  outline: 1px solid black;  
}
.parentSelector {
  background-image: linear-gradient(green, gold);
  background-size: 0 0;
  display: block;
  overflow: hidden;
  height: 50vh; width: 50vh;
}

.childSelector {
  display: inline-block;
  background-image: inherit;
  background-size: cover;
}

<div class='parentSelector'>
  parentSelector
  <div class='childSelector'>
    childSelector
  </div>
</div>

score -1 · Answer 2 · edited May 23 '17 at 11:51

It's not recommended to set the background-image in the html file.
If you want to use :after selector, you can use data- attribute but that is not implemented anywhere yet. (Using HTML data-attribute to set CSS background-image url)

.imgthumbnail:after{
    content:'';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: attr(data-image-src url);
    background-size: cover;
    background-position: center;
    transition: 500ms all ease-in-out;

}

...
<div class="imgthumbnail" data-image-src="http://doc.jsfiddle.net/_downloads/jsfiddle-logo.png">
    <div class="thumbtext">
        <h3>Title</h3>
        <hr/>
        <p>Description</p>
    </div>
</div>
...

You can set the background image to each element using :nth-child selector. You can add the style tag to the html file but it's not in the html content.

Example:

.imgthumbnail:first-child:after { 
   background-image:url(first_image_url);
}

.imgthumbnail:nth-child(2):after { 
   background-image:url(second_image_url);
}

... and so on.

http://www.w3schools.com/cssref/sel_nth-child.asp

Edit div with after selector in html

2 Answers2