CODEWITHSUNDEEP
jqueryhtmlcss
hjpotter92
hjpotter92

Reputation: 80647

Positioning a div/card when hovering over an image

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.

Upvotes: 3

Views: 505

Answers (3)

David Liam Clayton
David Liam Clayton

Reputation: 144

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>

Upvotes: 1

user2560539
user2560539

Reputation:

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>

Upvotes: 0

preator
preator

Reputation: 1039

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>

Upvotes: 2

Related Questions