CODEWITHSUNDEEP
htmlcssbootstrap-4
CurtLH
CurtLH

Reputation: 2417

Can right click and open but cannot click to open

I'm creating my first HTML website using Bootstrap, and I have been following this template: Freelancer - Start Bootstrap.

I've been able to customize the template to fit my needs for the most part. However, I have not been able to figure out how I can make it so that when I hover over a picture, you get the color overlay and the YouTube logo appears, and then when you click on the transparent overlay, the link opens.

With the template I'm using, there is an example of this, included below, but instead of a modal opening when you click on the overlay, I want an external URL to open. To do this, I thought I could just change the href to point to the external URL, but this doesn't seem to work. I can right click and open in a new window, but clicking on the overlay does nothing.

Image with overlay & logo:

<div class="col-md-4 col-lg-3">
  <a class="portfolio-item d-block mx-auto" href="#s-sign">
    <div class="portfolio-item-caption d-flex position-absolute h-100 w-100">
      <div class="portfolio-item-caption-content my-auto w-100 text-center text-white">
        <i class="fa fa-search-plus fa-3x"></i>
      </div>
    </div>
    <img class="img-fluid" src="img/project/s_sign.png" alt="">
  </a>
</div>

Modal that pops up when clicked on:

<div class="portfolio-modal mfp-hide" id="s-sign">
  <div class="portfolio-modal-dialog bg-white">
    <a class="close-button d-none d-md-block portfolio-modal-dismiss" href="#">
      <i class="fa fa-3x fa-times"></i>
    </a>
    <div class="container text-center">
      <div class="row">
        <div class="col-lg-8 mx-auto">
          <h2 class="text-secondary text-uppercase mb-0">Decorative Sign</h2>
          <hr class="star-dark mb-5">
          <img class="img-fluid mb-5" src="img/project/s_sign.png" alt="">
          <p class="mb-5">The frame is made from poplar. The slats are red oak. The "S" is MDF and was cut out by hand.</p>
          <a class="btn btn-primary btn-lg rounded-pill portfolio-modal-dismiss" href="#">
            <i class="fa fa-close"></i>
            Close Project</a>
        </div>
      </div>
    </div>
  </div>
</div>

My attempt to modify the href to point to an external URL instead of the modal section:

<div class="col-md-6 col-lg-4">
  <a class="projects-item d-block mx-auto" href="https://youtu.be/qXev3N5QE9A">
    <div class="projects-item-caption d-flex position-absolute h-100 w-100">
      <div class="projects-item-caption-content my-auto w-100 text-center text-white">
        <i class="fa fa-youtube fa-3x"></i>
      </div>
    </div>
    <img class="img-fluid" src="img/youtube/tote.png" alt="">
  </a>
</div>

I know how to make it so I can click on the image, and the URL opens, as seen below, but I want to have the overlay and logo appear when hovering. 

<div class="col-md-6 col-lg-4">
  <a class="nav-link external" href="https://youtu.be/zjTrW9-GrSs">
    <img class="img-fluid" src="img/youtube/tote.png" alt="">
  </a>
</div>

However over image to reveal overlay, can right-click to open, but cannot click to open:

Upvotes: 0

Views: 170

Answers (1)

cssyphus
cssyphus

Reputation: 40086

This might get you started.

Within your bootstrap column, create a container div that is the approx shape of the images/overlays you wish to move one on top of the other.

Within the container div, which should be made position:relative, make two more container divs, both position:absolute (so then can sit exactly one on top of the other)

Inside each pos:abs container div go your specific image and your youTube logo/overlay.

Then you can use javascript/jquery to swap them around on hover (or mouseenter/mouseleave).

$('.myImg').mouseenter(function(){
  $(this).fadeOut();
  $(this).next().fadeIn();
});
$('.ytLogo').mouseleave(function(){
  $(this).fadeOut();
  $(this).prev().fadeIn();
});
$('.ytLogo').click(function(){
  $(this).find('a').click();
});
.ytContainer{position:relative;}
.myImg{position:absolute;height:50px;width:50px;}
.ytLogo{display:none;}h

.w-100{width:100px;}
.h-100{height:100px;}
.fa{width:100px;height:100px}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> 

<div class="col-xs-6 col-md-6 col-lg-4">
  <div class="ytContainer">
    <div class="myImg">
      <img class="img-fluid ytImg" src="http://placeimg.com/100/100/animals" alt="">
    </div>
    <div class="ytLogo">
      <a class="projects-item d-block mx-auto" href="https://youtu.be/qXev3N5QE9A">
        <div class="projects-item-caption d-flex position-absolute h-100 w-100">
          <div class="projects-item-caption-content my-auto w-100 text-center text-white">
            <i class="fa fa-youtube fa-3x"></i>
          </div>
        </div>
      </a>
    </div>
  </div>
</div>

Upvotes: 1

Related Questions