1. Zuhause
  2. Frage und Antwort
  3. Fixing Bildbreite bei Hover mit CSS-Animation

Fixing Bildbreite bei Hover mit CSS-Animation

2016-06-02 2 views
0

Ich bin neu mit CSS3-Animation. Derzeit versuche ich, das Bild in einem Element um 40 Pixel nach links zu verschieben, wenn der Container schwebt, aber jedes Mal, wenn das Bild verschoben wird, wird ein leerer Bereich auf der rechten Seite des Containers angezeigt. Ich habe versucht, dem Bild eine größere Breite zu geben, um sicherzustellen, dass es keinen leeren Platz beim Schweben gibt, aber es funktioniert nicht. Ich bin mir nicht sicher, wie ich es formulieren soll, also habe ich hier einen Screenshot gemacht. Der rote Pfeil zeigt den leeren Bereich an, wenn der Container schwebt. Screenshot of the said problemFixing Bildbreite bei Hover mit CSS-Animation

Dies ist die HTML und CSS-Code des Elements:

HTML:

<ul> 
    <li class="opinion card wrapper"> 
       <div id="card" class="opinion card container"> 
         <div class="opinion card image variation-3"> 
          <a href="" class="opinion card article link"></a> 
         </div> 
          <div class="opinion card text variation-3"> 
           <a href=""> 
            <h2 class="opinion card headline"> 
             <span class="highlight">Contoh judul pendek yang agak panjang tapi panjang</span> 
            </h2> 
           </a> 
           <a href="/author" class="opinion card author link"> 
            <span class="highlight noTransition">Author Name</span> 
           </a> 
           <a href="/author" class="opinion card date link"> 
            <span class="highlight noTransition">Publication Date</span> 
           </a> 

           <p class="opinion card description"> 
            Indoor air pollution gets surprisingly little attention for such a lethal public health problem. It kills more people each year than HIV/AIDS and malaria combined, but few countries treat it as a crisis on the same level. 
           </p> 
          </div> 
         </div> 
       </li> 

     </ul>

CSS

.opinion.card.wrapper { 
    position: relative; 
    display: inline-block; 
    float: left; 
    width: 25%; 
    margin:0; 
    padding: 0; 
    overflow: hidden; 
    color: white; 
    box-sizing: border-box; 
    background: transparent; 
} 

.card.wrapper { 
    height: 618px; 
} 

.opinion.card.container { 
    overflow: hidden; 
    height: inherit; 
    display: block; 
    margin: 15px; 
    position: relative; 
} 

.opinion.card.article.link { 
    position: absolute; 
    top: 0; 
    left: 0; 
    bottom: 0; 
    right: 0; 
    width: 100%; 
    z-index: 3; 
} 

.opinion.card.author.link { 
    z-index: 1; 
} 

.opinion.card.image { 
    background: url("https://i.imgur.com/SvO0n5b.jpg") no-repeat; 
    background-position: center, center; 
    background-size: cover; 
    display: block; 
    height: inherit; 
    overflow: hidden; 
    position: absolute; 
    top: 0; 
    width: 150%; 
    cursor: pointer; 
} 

.opinion.card.image.variation-3 { 
    background-image: url("https://i.imgur.com/SvO0n5b.jpg"); 
    position: relative; 
    float: left; 
    overflow: hidden; 
    display: block; 
    min-height: 100%; 
    max-width: 100%; 
    opacity: 0.8; 
    max-width: none; 
    width: 100%; 
    height: -webkit-calc(100% + 50px); 
    height: calc(100% + 50px); 
    -webkit-filter: contrast(1.05) brightness(1.1); 
    filter: contrast(1.05) brightness(1.1); 
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; 
    transition: opacity 0.35s, transform 0.35s;/* 

    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; 
    transition: opacity 0.35s, transform 0.35s;*/ 
} 

.opinion.card.image.variation-2:before, 
.opinion.card.image.variation-3:before { 
    content: ""; 
    position: absolute; 

    height: 150%; 
    top:-200; 
    left: 0; 
    bottom: 0; 
    right: 0; 
    opacity: 0; 
    overflow:hidden; 
} 

.opinion.card.image.variation-3:before { 
    background-color: rgba(0,0,0,0.3); 
    opacity: 0; 
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; 
    transition: opacity 0.35s, transform 0.35s; 
    -webkit-transform: translate3d(0,50px,0); 
    transform: translate3d(0,50px,0); 
} 

.opinion.card.text { 
    float: left; 
    text-align: left; 
    margin: 30px 30px 45px 30px; 
    position: absolute; 
    bottom: 0; 
    left: 0; 
} 

.opinion.card.text.variation-3 { 
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; 
    transition: opacity 0.35s, transform 0.35s; 
    -webkit-transform: translate3d(0,50px,0); 
    transform: translate3d(0,50px,0); 
} 

.opinion.card.headline { 
    font-family: "Patua One", "Georgia", serif; 
    font-size: 40px; 
    font-size: 2.2222rem; 
    color: #fff; 
    margin-bottom: 10px; 
    position: relative; 
} 

.opinion.card.author, 
.opinion.card.date { 
    font-family: "Roboto Condensed", "Arial Narrow", sans-serif; 
    font-size: 18px; 
    font-size: 1rem; 
    color: #505eea; 
    position: relative; 
} 


.opinion.card.description { 
    font-family: "Roboto", "Arial", sans-serif; 
    font-size: 16px; 
    font-size: 0.8889rem; 
    font-style: italic; 
    color: #f1f1f1; 
    width: 90%; 
    margin-top: 30px; 
    line-height: 1.5; 
    -webkit-transform: translate3d(0,100%,0); 
    transform: translate3d(0,100%,0); 
    opacity: 0; 
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; 
    transition: opacity 0.35s, transform 0.35s; 
} 

.opinion.card.description:before { 
    position: absolute; 
    top: -15px; 
    left: 0; 
    width: 100%; 
    height: 5px; 
    background: #fff; 
    content: ""; 
    -webkit-transform: translate3d(0,40px,0); 
    transform: translate3d(0,40px,0); 
} 

.opinion.card .highlight { 
    background-color: #000; 
    padding: 5px; 
} 


.opinion.card.container:hover .opinion.card.image { 
    opacity: 1; 
    -webkit-transform: translate3d(0,0,0); 
    transform: translate3d(0,0,0); 
} 


.opinion.card.container:hover .opinion.card.image.variation-3 { 
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; 
    transition: opacity 0.35s, transform 0.35s; 
    -webkit-transform: translate3d(-40px,0, 0); 
    transform: translate3d(-40px,0,0); 
    width: 100%; 
} 

.opinion.card.container:hover .opinion.card.image.variation-2:before { 
    opacity: 1; 
    /*background-color: rgba(0,0,0,0.2);*/ 
    background-image: url(img/pattern_2.png); 
} 

.opinion.card.container:hover .opinion.card.image.variation-3:before, 
.opinion.card.container:hover .opinion.card.container:after { 
    opacity: 1; 
    -webkit-transition: -webkit-transform 0.35s; 
    transition: transform 0.35s; 

} 

.opinion.card.container:hover .opinion.card.container:after, 
.opinion.card.container:hover .opinion.card.description:before, { 
    -webkit-transform: translate3d(0,0,0); 
    transform: translate3d(0,0,0); 
} 

.opinion.card.container:hover .opinion.card.text.variation-3, 
.opinion.card.container:hover .opinion.card.description:before { 
    -webkit-transform: translate3d(0,0,0) scale(1); 
    transform: translate3d(0,0,0) scale(1); 

} 

.opinion.card.container:hover .opinion.card.description, 
.opinion.card.container:hover .opinion.card.container:after { 
    opacity: 1; 
    -webkit-transform: translate3d(0,0,0) scale(1); 
    transform: translate3d(0,0,0) scale(1); 
} 

.opinion.card.container:hover .opinion.card.container:after { 
    width: 100%; 
    height: 100%; 
} 

.opinion.card.container:hover .opinion.card.headline { 
    color: #505eea; 
    transition: 0.3s ease-in-out; 
} 

.opinion.card.container:hover .opinion.card.author { 
    transition: color 0s; 
} 

a.opinion.card.author:hover { 
    color: #fff; 
    transition: all 0.3s ease-in-out; 
} 

@media (min-width: 1280px) { 

.home.container { 
    margin: auto; 
    max-width: 1200px; 
} 


.card.wrapper { 
    height: 618px; 
} 


.opinion.card.wrapper { 
    display: inline-block; 
    width: 33.3333333%; 
    min-width: 33.3333333%; 
} 

.opinion.card.wrapper:first-child { 
    width: 66.66666666666%; 
} 

}

JSFiddle: https://jsfiddle.net/fatzjuhe/1/

Ich besitze nicht das hier verwendete Bild, ich habe nur ein zufälliges Bild von Imgur zur besseren Betrachtung genommen. Jede Hilfe wird sehr geschätzt. Vielen Dank!

Quelle

2016-06-02 Argi Kartika

+1

Ich bin ein bisschen verwirrt. Sie bewegen das Bild nach links und erwarten, dass es immer noch richtig bleibt? Kann es nicht auf beide Arten geben, es sei denn, Sie möchten das Bild nach links erweitern, anstatt es zu verschieben. –

+0

Dies ist der Screenshot, um mein Problem besser zu veranschaulichen: http://puu.sh/pecNe/f3e026cd6a.jpg Was den Vorschlag betrifft, ich arbeite daran. Danke für den Vorschlag! –

Antwort

1

Ich habe mein eigenes Problem gelöst. Im Grunde genommen habe ich die Eigenschaften max-width und min-width in der Klasse .variation-3 durcheinander gebracht. Ich habe auch die width -Eigenschaft des überhitzten Bildes definiert (sollte vom Bildzustand geerbt werden, bevor es verschoben wird). Es funktioniert jetzt perfekt.

.opinion.card.image.variation-3 { 
     background-image: url("https://i.imgur.com/SvO0n5b.jpg"); 
     float: left; 
     overflow: hidden; 
     display: block; 
     width: 120%; 
     -webkit-filter: contrast(1.05) brightness(1.1); 
     filter: contrast(1.05) brightness(1.1); 
     -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; 
     transition: opacity 0.35s, transform 0.35s; 
    } 

     .opinion.card.container:hover .opinion.card.image.variation-3 { 
     -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; 
     transition: opacity 0.35s, transform 0.35s; 
     -webkit-transform: translate3d(-40px,0, 0); 
     transform: translate3d(-40px,0,0); 
    }

Vielen Dank! JSFIDDLE:https://jsfiddle.net/fatzjuhe/2/

Quelle

2016-06-02 18:05:37

 Verwandte Themen

  • Keine verwandten Themen^_^