0
\$\begingroup\$

I have been given an extremely loose design to follow: a page must show people's photos and name in a text overlay over the image, and when clicked a bio shows below.

Must Haves

Photo, text overlay with white background that you can still see part of the image. On click show the bio information, must have a connecting arrow to the image to show show who it relates to.

First row must have three images, all other rows there after must have four.

The working fiddle is at http://jsfiddle.net/SimonPrice/5kmfq7L3/122/

$(document).ready(function(){
    $(".imagebox").on('click', function(){

  var obj = $(this);
      var bio = $(obj).siblings().find('.bio');
      var dataTarget = $(obj).data("target")
      var parent= $("#" + dataTarget).parents('.bio-text')    
      var target = $("#" + dataTarget)
      var parentId = parent.id;
      console.log(parent.is(':visible'))
        if ( parent.is(':visible') && target.is(':visible')){
        $('.bio').hide('slow');
        $('.bio-text').hide('slow');     
        $('.bio-text-value').hide('slow');
        }
      else{
        $('.bio').hide();
        $('.bio-text').hide();     
        $('.bio-text-value').hide();

        console.log(parent)
        target.fadeIn('fast')
        bio.fadeIn('slow');
        target.fadeIn('slow');
        parent.fadeIn('slow')
      }
  })  
})
.bio {
     margin-left: 15px;
     background: #FFFFFF;
    /*border: 1px solid #CAD5E0;
    */
     border-radius: 8px;
     position: absolute;
     z-index: 9 
}
 .bio-text {
     margin-top:4px;
     width: 97%;
     background: #FFFFFF;
     border: 1px solid #CAD5E0;
     border-radius: 8px;
     min-height: 300px 
}
 .bio:after {
     content: '';
     display: block;
     position: absolute;
     top: -11px;
     width: 30px;
     height: 30px;
     background: #FFFFFF;
     border-right:1px solid #CAD5E0;
     border-top:1px solid #CAD5E0;
     -moz-transform:rotate(-45deg);
     -webkit-transform:rotate(-45deg);
}

 .first, .second, .third, .fourth, .bio-text, .bio-text-value{
     display: none;
}

 .imagebox {
     padding: 0px;
     position: relative;
     text-align: center;
     width: 100%;
}
 .imagebox img {
     opacity: 1;
     transition: 0.5s opacity;
     border-radius: 8px 
}
 .imagebox .imagebox-desc {
     background-color: #ffffff;
     bottom: 0px;
     color: #000000;
     font-size: 1.2em;
     left: 0px;
     padding: 10px 15px;
     position: absolute;
     transition: 0.5s padding;
     text-align: center;
     width: 100%;
     opacity: 0.5;
}
 .imagebox:hover img {
     opacity: 0.9;
}
 .imagebox:hover .imagebox-desc {
     padding-bottom: 10%;
     opacity: 0.9;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
   <div class="row">
      <div class="col-sm-4">
         <div class="imagebox" data-target="simon">
            <a href="#hola">
            <img src="//placeimg.com/400/400/animals"  class="category-banner img-fluid">
            <span class="imagebox-desc">Lorem ipsum dolor sit amet!</span>
            </a>
         </div>
         <div class="comments">
         </div>
         <div class="offset-md-5 offset-sm-4 offset-5 bio-container">
            <div class="bio first">
            </div>
         </div>
      </div>
      <div class="col-sm-4">
         <div class="imagebox"  data-target="vinnie">
            <a href="#hola">
            <img src="//placeimg.com/400/400/animals"  class="category-banner img-fluid">
            <span class="imagebox-desc">Lorem ipsum dolor sit amet!</span>
            </a>
         </div>
         <div class="comments">
         </div>
         <div class="offset-md-5 offset-sm-4 offset-5">
            <div class="bio second">
            </div>
         </div>
      </div>
      <div class="col-sm-4">
         <div class="imagebox" data-target="stuart">
            <a href="#hola">
            <img src="//placeimg.com/400/400/animals"  class="category-banner img-fluid">
            <span class="imagebox-desc">Lorem ipsum dolor sit amet!</span>
            </a>
         </div>
         <div class="comments">
         </div>
         <div class="offset-md-5 offset-sm-4 offset-5">
            <div class="bio third">
            </div>
         </div>
      </div>
   </div>
   <div class="row">
      <div class="col-md-12 col-sm-12 col-12">
         <div class="bio-text">
            <div class="col-md-12 col-sm-12 col-12">
               <div class="bio-text-value" id="simon">
                  <p>
                     Pickle Rick
                  </p>
               </div>
               <div class="bio-text-value" id="vinnie">
                  <p>
                     batman
                  </p>
               </div>
               <div class="bio-text-value" id="stuart">
                  <p>
                     lego batman
                  </p>
               </div>
            </div>
         </div>
      </div>
   </div>
   <div class="row">
      <div class="col-sm-3">
         <div class="imagebox" data-target="simon-p">
            <a href="#hola">
            <img src="//placeimg.com/400/400/animals"  class="category-banner img-fluid">
            <span class="imagebox-desc">Lorem ipsum dolor sit amet!</span>
            </a>
         </div>
         <div class="comments">
         </div>
         <div class="offset-md-5 offset-sm-4 offset-5 bio-container">
            <div class="bio first">
            </div>
         </div>
      </div>
      <div class="col-sm-3">
         <div class="imagebox"  data-target="vinnie-l">
            <a href="#hola">
            <img src="//placeimg.com/400/400/animals"  class="category-banner img-fluid">
            <span class="imagebox-desc">Lorem ipsum dolor sit amet!</span>
            </a>
         </div>
         <div class="comments">
         </div>
         <div class="offset-md-5 offset-sm-4 offset-5">
            <div class="bio second">
            </div>
         </div>
      </div>
      <div class="col-sm-3">
         <div class="imagebox" data-target="stuart-w">
            <a href="#hola">
            <img src="//placeimg.com/400/400/animals"  class="category-banner img-fluid">
            <span class="imagebox-desc">Lorem ipsum dolor sit amet!</span>
            </a>
         </div>
         <div class="comments">
         </div>
         <div class="offset-md-5 offset-sm-4 offset-5">
            <div class="bio third">
            </div>
         </div>
      </div>
      <div class="col-sm-3">
         <div class="imagebox" data-target="david-h">
            <a href="#hola">
            <img src="//placeimg.com/400/400/animals"  class="category-banner img-fluid">
            <span class="imagebox-desc">Lorem ipsum dolor sit amet!</span>
            </a>
         </div>
         <div class="comments">
         </div>
         <div class="offset-md-5 offset-sm-4 offset-5">
            <div class="bio third">
            </div>
         </div>
      </div>
   </div>
   <div class="row">
      <div class="col-md-12 col-sm-12 col-12">
         <div class="bio-text">
            <div class="col-md-12 col-sm-12 col-12">
               <div class="bio-text-value" id="simon-p">
                  <p>
                     Pickle Rick - 1
                  </p>
               </div>
               <div class="bio-text-value" id="vinnie-l">
                  <p>
                     batman - 1
                  </p>
               </div>
               <div class="bio-text-value" id="stuart-w">
                  <p>
                     lego batman - 1
                  </p>
               </div>
               <div class="bio-text-value" id="david-h">
                  <p>
                     lego batman - 2
                  </p>
               </div>
            </div>
         </div>
      </div>
   </div>
</div>

\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.