Ich habe eine animierte Bootstrap 4-Karte codiert: https://codepen.io/Steven2105/pen/ZEGLWma.

Die Karte zeigt standardmäßig eine Überschrift, der Kartentext sollte unsichtbar sein. Sobald Sie mit der Maus über die Karte fahren, sollte sich der Text ebenfalls nach oben bewegen und sichtbar sein.

Meine Frage ist also, wie ich den Kartentext ausblenden, die Überschrift nur anzeigen und sichtbar machen kann, wenn ich den Mauszeiger darüber halte.

Wenn Sie auf dieser Seite nach unten scrollen, sollten Sie auch solche Karten sehen, und ich möchte, dass sie so sind wie sie .

.card-body {
  margin-top: -58px;
  background-color: rgba(0, 82, 204, 0.7);
}

.card:hover .card-body {
  animation-duration: 0.6s;
  animation-name: slidein;
  animation-fill-mode:both;
  margin-top: 0;
}

@keyframes slidein {
  from {
    transform: translateY(0);
  }
  
  to {
    transform: translateY(-100%);
  }
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="card" style="width: 18rem;">
  <img class="card-img-top" src="https://via.placeholder.com/150" alt="Card image cap">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
1
Steven2105 24 Feb. 2020 im 11:04

4 Antworten

Beste Antwort
.card {
  position: relative;
  overflow: hidden;
}

.card-body {
  bottom: 0;
  width: 100%;
  position: absolute;
  background-color: rgba(0, 82, 204, 0.7);
}

.card-text {
  opacity: 0;
  max-height: 0;
  transition: all 0.5s ease-in;
}

.card:hover .card-text {
  display: block;
  max-height: 150px;
  opacity: 1;
  transition: all 1s ease-out; 
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="card" style="width: 18rem;">
  <img class="card-img-top" src="https://via.placeholder.com/150" alt="Card image cap">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
2
Dmytro Cheglakov 24 Feb. 2020 im 09:13

Sie können die Sichtbarkeitseigenschaft verwenden

Beispiel 1:

h2.a {
   visibility: visible;
}

h2.b {
   visibility: hidden;
}

Beispiel 2:

HTML

<div class="container">
 <h1>Link Hover Here</h1>

  <h3>Lorem ipsum dolor sit amet consectetur adipisicing elit. Est, aut! Ea eos 
   voluptate numquam sapiente cum, enim facilis a cumque dolore, modi, autem possimus 
   voluptatem architecto ratione sequi dolores ipsa.</h3>
</div>

CSS

h3{
    visibility: hidden;
}

h1:hover {
  color: #ff0000;
}

.container:hover h3{
  visibility: visible;
}

CSS-Sichtbarkeitseigenschaft: https://www.w3schools.com/cssref /pr_class_visibility.asp

Codepen: https://codepen.io/manaskhandelwal1/pen/abOpNgR

0
Manas Khandelwal 24 Feb. 2020 im 08:20

Ich habe die letzten 2 Antworten gesehen. Ich komme zu Ihnen, um eine hervorragende Version dieser UX-Karte anzubieten. Ich habe das vor ein paar Monaten auf Codepen gemacht und versucht, einen coolen Effekt auf die Karte zu bringen. Vielleicht hilft Ihnen meine Teilnahme! Mein Codepen: https://codepen.io/ZellRDesign/pen/MPbRyr

* { box-sizing: border-box; }

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700);

body{
  font-family: "Open Sans";
  font-size:16px;
  background-color: #eee;
}

.link{
    display: block;
}

.card {
  position: absolute;
  top: 50%;
  left: 50%;
  transform :  translateX(-50%) translateY(-50%) translateZ(0);
  width: 370px;
  box-shadow: 0 0 20px rgba(black,0.1);
  overflow: hidden;
  transition: box-shadow 0.5s;
}

.card a{
    color:inherit;
    text-decoration: none;
}

.card:hover{
  box-shadow:0 0 50px rgba(black,0.3);
}

.card-date{
  position: absolute;
  top: 20px;
  right: 20px;
  width: 45px;
  height: 45px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: rgb(68, 105, 176);
  border-radius: 50%;
  color:#fff;
  font-weight: 700;
  line-height: 13px;
  font-weight: 300;
}

.card-date-month{
    text-transform: uppercase;
    font-size:10px;
}

.card-date-day{
    font-size:14px;
}

.card-thumb{
  height: 245px;
  overflow: hidden;
  background-image: url("https://images.unsplash.com/photo-1512036849132-48508f294900?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=af817fb1a3fe6d229f4bfc0b8d60441a&auto=format&fit=crop&w=634&q=80");
  background-size: cover;
  transition: height 0.5s;
  
  img{
    display:block;
    opacity: 1;
    transform: scale(1);
    transition: opacity 0.5s, transform 0.5s;
  }
}

.card:hover .card-thumb{
    height: 130px;
}

.card-body{
  position: relative;
  height: 105px;
  background-color: #e6e6e6;
  padding:20px;
  transition: height 0.5s;
}

.card:hover .card-body{
    height: 220px;
}

.card-title{
  margin: 0;
  padding: 0 0 10px 0;
  color: #000;
  font-size: 22px;
  font-weight: bold;
  text-transform: uppercase;
}

.card-description{
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 20px;
  margin: 0;
  padding: 0;
  color: #666C74;
  line-height: 27px;
  opacity:0;
  transform: translateY(45px);
  transition: opacity 0.5s -0.2s, transform 0.5s -0.2s;
  transition-delay: 0s;
}
.card:hover .card-description{
    opacity:1;
    transform: translateY(0);
    transition-delay: 0.2s;  
}
<article class="card">
  <header class="card-thumb">
    <a href="#" class="link"></a>
  </header>
  <date class="card-date">
    <span class="card-date-day">11</span>
    <br/>
    <span class="card-date-month">Juin</span>
  </date>
  
  <div class="card-body">
    <h2 class="card-title"><a href="#">We're on a highway to hell!</a></h2>
    <p class="card-description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit cumque non commodi, modi recusandae cupiditate ipsa ab soluta. Illum, dolore.</p>
  </div>
</article>

NB: Über diesen Link erhalten Sie ein hervorragendes Tutoriel (auf Französisch): https: //www.grafikart.fr/tutoriels/card-ui-629

1
Mathéo Zeller 24 Feb. 2020 im 09:07
.card-body {
  margin-top: -58px;
  background-color: rgba(0, 82, 204, 0.7);
  position: absolute;
  background-color: rgba(0, 82, 204, 0.7);
  bottom: 0px;
  right: 0px;
  width: 100%;
}

.card:hover .card-body {
  animation-duration: 0.6s;
  animation-name: slidein;
  animation-fill-mode:both;
  margin-top: 0;
}

.card-text{
  display:none;
}

.card:hover .card-text{
  display:block;
}

.card:hover .card-body{
  position:relative !important;
}

@keyframes slidein {
  from {
    transform: translateY(0);
  }
  
  to {
    transform: translateY(-100%);
  }
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="card" style="width: 18rem;">
  <img class="card-img-top" src="https://via.placeholder.com/150" alt="Card image cap">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
1
Yasaman.Mansouri 24 Feb. 2020 im 08:17