Image Hover From Bottom, Color Overlay

image-hover-from-bottom-color-overlay.markdown

Image Hover From Bottom, Color Overlay

A Pen by C U on CodePen.

License.

index.html

<div id="main">
  <p>Look in my image hover collection for the example this is based off of</p>
<!-- OPTION 1 -->
  <div class="overlay-outer">
    <a href="#">
    <div class="overlay"></div>
    <img src='https://images.unsplash.com/photo-1587317996312-6314ec7b5a06?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ'>
     <div class="content-details fadeIn_bottom">
        <h3 class="content-title">This is a title</h3>
        <p class="content-text">This is a short description</p>
     </div>
</a>
  </div>
<!--    -->
  <p>So I'm not a big fan of the overlay-outer class and how it's resitricting the width.</p>
  <hr />
<!-- OPTION 2 -->
  <div class="hover_color">
    <img src='https://images.unsplash.com/photo-1587317996312-6314ec7b5a06?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ'>
    <div class="hover_color-inner">
      <p class="hover_title">Title Goes Here</p>
    </div>
    <a href="#"></a>
  </div>
  <p>I like this one a lot better, use it.</p>
<!--    -->
</div>

script.js

//className, way to add a specific class name to an element
document.getElementById("main").className = "container";

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

style.css

@import url("https://fonts.googleapis.com/css?family=Montserrat:400,400i,700");

* {
  margin: 0;
  padding: 0;
  font-family: "Montserrat";
}

h1, h2, h3 {
  margin: 20px 0;
  color: #00695C;
}

p {
  font-size: 1.2em;
  margin: 20px 0;
}

button {
  padding: 10px 20px;
  font-size: 1em;
}

.container {
  max-width: 800px;
  margin: auto;
  padding: 20px;
  text-align: center;
}

img {
  max-width: 500px;
}

hr {
  margin: 2rem 0;
}

/* OPTION 1 */
.overlay-outer {
  position: relative;
  width: 90%;
  max-width: 400px;
  margin: auto;
  overflow: hidden;
}

.overlay {
  background: rgba(4,125,67,0.7);
  position: absolute;
  height: 99%;
  width: 100%;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  opacity: 0;
  transition: all 0.4s ease-in-out 0s;
}

a:hover .overlay {
  opacity: 1;
}

.content-details {
  position: absolute;
  text-align: center;
  padding-left: 1em;
  padding-right: 1em;
  width: 100%;
  top: 50%;
  left: 50%;
  opacity: 0;
  transform: translate(-50%, -50%);
  transition: all 0.3s ease-in-out 0s;
}

.overlay-outer:hover .content-details {
  top: 50%;
  left: 50%;
  opacity: 1;
}

.content-details h3 {
  color: #fff;
  font-weight: 500;
  letter-spacing: 0.15em;
  margin-bottom: 0.5em;
  text-transform: uppercase;
}

.content-details p {
  color: #fff;
  font-size: 0.8em;
}

.fadeIn_bottom {
  top: 80%;
}
/*  */

/* OPTION 2 */
.hover_color {
  position: relative;
  margin: 0;
  display: inline-block;
}

.hover_color::before {
  position: absolute;
  content: '';
  left: 0;
  top: 100%;
  right: 0;
  bottom: 0;
  background: rgba(246,227,75,.8);
  transition: all 350ms;
  /*this. this is stupid. to get rid of that empty space. I don't know what causes it*/
/*   margin-bottom: 3px;  */
}

.hover_color:hover::before {
  top: 0;
}

.hover_color img {
  margin-bottom: 0;
  width: 100%;
  height: 100%;
  /*alternate solution for that stupid space at the bottom*/
  margin-bottom: -3px;
}

.hover_color .hover_color-inner {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.hover_title {
    transform: translateY(-4px);
    opacity: 0;
    transition: all 350ms;
}

.hover_color a {
    position: absolute;
    content: '';
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    z-index: 1;
}

.hover_color:hover .hover_title {
  transform: translateY(0);
  opacity: 1;
}
/*  */