Positioning a div/card when hovering over an image - Twitter bootstrap

hjpotter92
May 13, 2016
259 views
2 votes
3 Answers

I have markup as follows:

$('.box').hover(
  function(e) {
    var $this = $(this);
    $('.box').not($this).addClass('filter');
    $('.card').show();
  },
  function(e) {
    var $this = $(this);
    $('.box').not($this).removeClass('filter');
    $('.card').hide();
  }
);

.card {
  display: none;
  width: 250px;
  height: auto;
  border: thin red solid;
  border-radius: 2em;
  padding: 1em 0;
}
.box {
  transition: all .5s linear;
}
.filter {
  -webkit-filter: opacity(.1);
  -moz-filter: opacity(.1);
  -ms-filter: opacity(.1);
  -o-filter: opacity(.1);
  filter: opacity(.1);
}
html,
body {
  background-color: aquamarine;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap-theme.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="row">
  <div class="text-center col-xs-3">
    <img class="box" data-direction="right" src="https://placehold.it/100x300" />
  </div>
  <div class="text-center col-xs-3">
    <img class="box" data-direction="right" src="https://placehold.it/100x300" />
  </div>
  <div class="text-center col-xs-3">
    <img class="box" data-direction="left" src="https://placehold.it/100x300" />
  </div>
  <div class="text-center col-xs-3">
    <img class="box" data-direction="left" src="https://placehold.it/100x300" />
  </div>
</div>

<div class="card">
  <h1 class="text-uppercase">card here</h1>
</div>

As can be seen from the snippet, the .card element hides as soon as mouse hovers out of the .box images. I’ve also tried using a code like the following:

$('.card').removeClass('hidden').delay(2000).queue(
  function() {
    $(this).addClass('hidden').dequeue();
  }
);

where .hidden is provided by Bootstrap. This works, but doesn’t achieve what I have in mind.

Concept

What I’m trying to do here is, the .card box will be shown either to the left or right of the .box images (depending on the [data-direction] attribute), vertically aligned to the middle. The positioning part using JS is not a problem (I think).

Issue

This card should be visible as long as the mouse is hovering over the img.box element, and later, if the mouse leaves the .box and the user is trying to select/click on links in the .card container, this card should stay visible. Once the user leaves the .card, it should fade-out after a small duration.

Answers

Maybe check out some existing solutions, this is easily doable using CSS only also. here is one solution

Sorry I didn’t understand correctly on the first time. Checkout my Fiddle
https://jsfiddle.net/ywbz37qp/

var active;

$('.box').hover(
  function(e) {
    var $this = $(this);
    active = $(this);
    $('.box').not($this).addClass('filter');
      var leftOffset = active.parent().position().left;
  console.log(leftOffset);
    $('.card').show().css("left", leftOffset);
  },
  function(e) {
    var $this = $(this);
    $('.box').not($this).removeClass('filter');
    $('.card').hide();
  }
);

$('.card').hover(
  function(e) {

    $('.card').show();
    $('.box').not(active).addClass('filter');
  },
  function(e) {
    $('.card').hide();
    $('.box').not(active).removeClass('filter');
  }
);

.card {
  display: none;
  width: 250px;
  height: auto;
  border: thin red solid;
  border-radius: 2em;
  padding: 1em 0;
}
.box {
  transition: all .5s linear;
}
.filter {
  -webkit-filter: opacity(.1);
  -moz-filter: opacity(.1);
  -ms-filter: opacity(.1);
  -o-filter: opacity(.1);
  filter: opacity(.1);
}
html,
body {
  background-color: aquamarine;
}
.card{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.wrap{
  position: relative;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap-theme.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="wrap">
<div class="row">
  <div class="text-center col-xs-3">
    <img class="box" data-direction="right" src="https://placehold.it/100x300" />
  </div>
  <div class="text-center col-xs-3">
    <img class="box" data-direction="right" src="https://placehold.it/100x300" />
  </div>
  <div class="text-center col-xs-3">
    <img class="box" data-direction="left" src="https://placehold.it/100x300" />
  </div>
  <div class="text-center col-xs-3">
    <img class="box" data-direction="left" src="https://placehold.it/100x300" />
  </div>
</div>

<div class="card">
  <h1 class="text-uppercase">card here</h1>
</div>
</div>

Just alter your javascript like in the below example

$('.box').addClass('filter'); // apply filter class to all box elements
$('.box').on('mouseover',function() {
    $(this).removeClass('filter');
    $('.card').show(300).offset({ top: 100, left: $(this).offset().left});
});
$('.box').on('mouseout',function() {
    $(this).addClass('filter');
    $('.card').hide(950);
});

.card {
          display: none;
          width: 100px;
          height: auto;
          border: thin red solid;
          border-radius: 2em;
          padding: 1em 0;
          position:fixed;
          top:100px;
        }
        .box {
          transition: all .5s linear;
          height:300px;
        }
        .filter {
          -webkit-filter: opacity(.1);
          -moz-filter: opacity(.1);
          -ms-filter: opacity(.1);
          -o-filter: opacity(.1);
          filter: opacity(.1);
        }
        html,
        body {
          background-color: aquamarine;
        }

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap-theme.min.css" rel="stylesheet" />
        <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
    
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    
        <div class="row">
          <div class="text-center col-xs-3">
            <img class="box" data-direction="right" src="https://placehold.it/100x300" />
          </div>
          <div class="text-center col-xs-3">
            <img class="box" data-direction="right" src="https://placehold.it/100x300" />
          </div>
          <div class="text-center col-xs-3">
            <img class="box" data-direction="left" src="https://placehold.it/100x300" />
          </div>
          <div class="text-center col-xs-3">
            <img class="box" data-direction="left" src="https://placehold.it/100x300" />
          </div>
        </div>
    
        <div class="card">
          <h1 class="text-uppercase">card here</h1>
        </div>

Is the below what you’re trying to achieve?

$('.box').hover(
  function(e) {
    var $this = $(this);
    $('.box').not($this).addClass('filter');
    $('.card').show();
    $('.card').hover("", function(){$('.card').hide();})
  }, function(e) {
    var $this = $(this);
    $('.box').not($this).removeClass('filter');
  }
);

.card {
  display: none;
  width: 250px;
  height: auto;
  border: thin red solid;
  border-radius: 2em;
  padding: 1em 0;
}
.box {
  transition: all .5s linear;
}
.filter {
  -webkit-filter: opacity(.1);
  -moz-filter: opacity(.1);
  -ms-filter: opacity(.1);
  -o-filter: opacity(.1);
  filter: opacity(.1);
}
html,
body {
  background-color: aquamarine;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap-theme.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="row">
  <div class="text-center col-xs-3">
    <img class="box" data-direction="right" src="https://placehold.it/100x300" />
  </div>
  <div class="text-center col-xs-3">
    <img class="box" data-direction="right" src="https://placehold.it/100x300" />
  </div>
  <div class="text-center col-xs-3">
    <img class="box" data-direction="left" src="https://placehold.it/100x300" />
  </div>
  <div class="text-center col-xs-3">
    <img class="box" data-direction="left" src="https://placehold.it/100x300" />
  </div>
</div>

<div class="card">
  <h1 class="text-uppercase">card here</h1>
</div>

Please signup or login to give your own answer.

Click here to cancel reply.

Positioning a div/card when hovering over an image – Twitter bootstrap

Concept

Issue

Answers