Bootstrap Snippet Hover card using HTML CSS Javascript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<a href="#" class="card">
    <div class="card__head">
        <div class="card__image"></div>
        <div class="card__author">
            <div class="author">
                <img src="https://s.gravatar.com/avatar/7ff9e93ff25e002bc49f4d69c0c3eac7?s=80" alt="Author of Tobias Reich" class="author__image">
                <div class="author__content">
                    <p class="author__header">Tobias Reich</p>
                    <p class="author__subheader">Web developer and designer</p>
                </div>
            </div>
        </div>
    </div>
    <div class="card__body">
        <h2 class="card__headline">Hover me</h2>
        <p class="card__text">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore.</p>
    </div>
    <div class="card__foot">
        <span class="card__link">Read more</span>
    </div>
    <div class="card__border"></div>
</a>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
body {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 100vh;
  font-family: 'Open Sans', sans-serif;
  color: #333;
  background: #f8f8f8;
}
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 500px;
  background: white;
  color: currentColor;
  text-decoration: none;
  overflow: hidden;
  transition-property: color;
  transition-delay: 0.15s;
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
}
.card.hover {
  color: white;
  transition-delay: 0;
}
.card, .card__image, .card__image::after, .card__author, .card__body, .card__foot, .card__border {
  transition-duration: 0.4s;
  transition-timing-function: cubic-bezier(0.51, 0.92, 0.24, 1);
}
.card__head {
  position: relative;
  padding-top: 70%;
}
.card__author {
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
const height = (elem) => {
    return elem.getBoundingClientRect().height
}
const distance = (elemA, elemB, prop) => {
    const sizeA = elemA.getBoundingClientRect()[prop]
    const sizeB = elemB.getBoundingClientRect()[prop]
    return sizeB - sizeA
}
const factor = (elemA, elemB, prop) => {
    const sizeA = elemA.getBoundingClientRect()[prop]
    const sizeB = elemB.getBoundingClientRect()[prop]
    return sizeB / sizeA
}
document.querySelectorAll('.card').forEach((elem) => {
    const head = elem.querySelector('.card__head')
    const image = elem.querySelector('.card__image')
    const author = elem.querySelector('.card__author')
    const body = elem.querySelector('.card__body')
    const foot = elem.querySelector('.card__foot')
    elem.onmouseenter = () => {
        elem.classList.add('hover')
        const imageScale = 1 + factor(head, body, 'height')
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Hover card"
Bootstrap 4.1.1 Snippet by koshikojha

Related: See More

Questions / Comments:

"Hover card" Bootstrap 4.1.1 Snippet by koshikojha

Related: See More

Questions / Comments:

"Hover card"
Bootstrap 4.1.1 Snippet by koshikojha