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\$
  • \$\begingroup\$ is there any particular arrow image that you want to show on mouseover of the image? \$\endgroup\$ – Sandip Vora Feb 18 at 6:15
  • \$\begingroup\$ this is an old ticket now and in production in an old company that i was working for. what you thinking? \$\endgroup\$ – Simon Price Feb 19 at 14:01

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.