Advertisement
Advertisement


How do I position a text reveal image in weird positions


Question

I got an image. Hover event shows some text overlapping the image. This is going to be used in a character page. I am having trouble positioning the image. The image should just float around the center.

Live Example (codepen)

I already found this css code, if helps:

/*
 * Note: If you are using landscape images use 'background-size:auto 100%;'
 * in .textOverImage and 'background-size:auto 110%;' in .textOverImage:hover
 */

a { text-decoration:none; }

/*
 * Add the following compatibility code for IE as you can't animate
 * background-size in IE
 */

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active){
  .textOverImage{background-size:cover!important;}
}

.textOverImage {
  position:relative;
  width:300px;
  height:300px;
  float:left;
  margin:4px;
  background-size:100%;
  background-position:center;
  transition:0.5s;
  overflow:hidden;
  border-radius:4px;
  box-shadow:0 0 4px #000;
}

.textOverImage:hover {
  background-size:110%;
}

.textOverImage:before {
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  right:0;
  transform:translateY(90%); /*use transform:translateY(100%); to remove footer*/
  background-color:rgba(0,0,0,0.3);
  color:#fff;
  padding:0 8px;
  content:attr(data-title);
  transition:0.5s 0.1s;
  color:#fff;
  font-weight:bold;
  font-size:1.5em;
}

.textOverImage:after {
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  right:0;
  color:#fff;
  padding:8px;
  content:attr(data-text);
  transition:0.5s;
  padding-top:2em;
  margin-top:8px;
  transform:translateY(100%);
  opacity:0;
}

.textOverImage:hover:after {
  transform:translateY(0);
  transition:0.5s 0.1s;
  opacity:1;
}

.textOverImage:hover:before {
  transform:translateY(0);
  padding:8px;
  background-color:rgba(0,0,0,0.6);
  transition:0.5s;
}
2020/04/02
0
0
4/2/2020 1:08:57 AM