Difference between revisions of "Template:Georgia State/sand"

Line 2,220: Line 2,220:
  
 
<!---Mask effects--->
 
<!---Mask effects--->
 +
.colcontainer {
 +
    position: relative;
 +
    width: 50%;
 +
}
 +
 +
.colimage {
 +
  opacity: 1;
 +
  display: block;
 +
  width: 100%;
 +
  height: auto;
 +
  transition: .5s ease;
 +
  backface-visibility: hidden;
 +
}
 +
 +
.colmiddle {
 +
  transition: .5s ease;
 +
  opacity: 0;
 +
  position: absolute;
 +
  top: 50%;
 +
  left: 50%;
 +
  transform: translate(-50%, -50%);
 +
  -ms-transform: translate(-50%, -50%);
 +
  text-align: center;
 +
}
 +
 +
.colcontainer:hover .image {
 +
  opacity: 0.3;
 +
}
 +
 +
.colcontainer:hover .middle {
 +
  opacity: 1;
 +
}
 +
 +
.coltext {
 +
  background-color: #4CAF50;
 +
  color: white;
 +
  font-size: 16px;
 +
  padding: 16px 32px;
 +
}
 +
 
.view {
 
.view {
 
   width: 300px;
 
   width: 300px;
Line 2,292: Line 2,332:
 
}
 
}
  
.wp-caption {
+
 
position: relative;
+
padding: 0;
+
margin: 0;
+
}
+
.wp-caption img {
+
display: block;
+
max-width: 100%;
+
height: auto;
+
}
+
.wp-caption-text {
+
opacity: 0;
+
position: absolute;
+
width: 100%;
+
color: #fff;
+
left: 0;
+
bottom: 0;
+
padding: 0.75em 1em;
+
font-weight: 700;
+
z-index: 2;
+
-webkit-box-sizing: border-box;
+
box-sizing: border-box;
+
background-color: rgba(0,0,0,.7);
+
-webkit-transition: opacity .3s ease-in-out;
+
transition: opacity .3s ease-in-out;
+
}
+
.wp-caption:hover .wp-caption-text {
+
opacity: 1;
+
}
+
 
</style>
 
</style>
  

Revision as of 05:57, 17 October 2018