ブートストラップカードの画像を変換する

Question

ここに私の問題がありますが、私が望むようにブートストラップカードを正常にエンコードしましたが、細かい部分が悲しいです。

私は、私だけが私の頭に傷を付け、私は得ることができないあらゆるものを試すことができ

ボタンのに関する情報」と「改造」が「変換スケール」で考慮されていないことを確認したいと思いますこのパスから

ここには、CSS & HTMLコードがあります。

<div class="card-deck row"> 

<div class="col-3"><!--event serv--> 
    <div class="card"> 
    <div class="card bg-inverse"> 
    <div class="card-block card-inverse event serv"> 
    <h5>Special event</h5><p class="lead">PVP/PVE</p> 
    <a href="#" class="btn btn-sm btn-secondary">Infos</a> 
    <a href="#" class="btn btn-sm btn-primary">Mods</a> 
    </div> 
    </div> 
    </div> 
</div><!--/event serv--> 

<div class="col-6"><!--island serv--> 
    <div class="card"> 
    <div class="card bg-inverse"> 

    <div class="card-block card-inverse island serv"> 
    <h5>The island</h5><p class="lead">PVE x 3</p> 
    <a href="#" class="btn btn-sm btn-secondary">Infos</a> 
    <a href="#" class="btn btn-sm btn-primary">Mods</a> 
    </div> 
    </div> 
    </div> 
</div><!--/island serv--> 

<div class="col-3"><!--scorched serv--> 
    <div class="card"> 
    <div class="card bg-inverse"> 
    <div class="card-block card-inverse scorched serv"> 
    <h5>Scorched earth</h5><p class="lead">PVE x 3</p> 
    <a href="#" class="btn btn-sm btn-secondary">Infos</a> 
    <a href="#" class="btn btn-sm btn-primary">Mods</a> 
    </div> 
    </div> 
    </div>         
</div><!--/scorched serv--> 
</div> 

CSS：私の問題はどこから来る

.event{background-image: url(https://images2.alphacoders.com/819/819763.jpg);background-size:cover;background-position: center;} 

    .island{ 
    background-image: url(https://s-media-cache-ak0.pinimg.com/originals/3b/91/6b/3b916b8b33b7aa08bf8fb920be2aa536.jpg); 
    background-size:cover; 
    background-position: center; 
    } 

    .scorched{ 
    background-image: url(https://images4.alphacoders.com/819/819770.jpg); 
    background-size:cover; 
    background-position: center;} 

    .card{overflow:hidden;} 

    .serv{position:relative;} 

    .serv:hover{transform:scale(1.1);transition:all 0.7s;} 

誰か知っていますか？どうもありがとうございました ！

Answer 1

あなただけの画像は、拡大縮小.servの::after擬似要素にbackgroundを移動し、それがテキストの背後にある擬似要素を否定z-indexを与え、擬似要素absolute LYを置き、代わりに.serv::afterへの移行を移動したい場合の:hover疑似クラスのみで、.servの代わりに.serv::afterにtransform: scale()を記録してください。

.event::after { 
 
    background-image: url(https://images2.alphacoders.com/819/819763.jpg); 
 
    background-size: cover; 
 
    background-position: center; 
 
} 
 

 
.island::after { 
 
    background-image: url(https://s-media-cache-ak0.pinimg.com/originals/3b/91/6b/3b916b8b33b7aa08bf8fb920be2aa536.jpg); 
 
    background-size: cover; 
 
    background-position: center; 
 
} 
 

 
.scorched::after { 
 
    background-image: url(https://images4.alphacoders.com/819/819770.jpg); 
 
    background-size: cover; 
 
    background-position: center; 
 
} 
 

 
.card { 
 
    overflow: hidden; 
 
} 
 

 
.serv { 
 
    position: relative; 
 
} 
 

 
.serv::after { 
 
    content: ''; 
 
    position: absolute; 
 
    top: 0; left: 0; right: 0; bottom: 0; 
 
    z-index: -1; 
 
    transition: transform 0.7s; 
 
} 
 

 
.serv:hover::after { 
 
    transform: scale(1.1); 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container"> 
 
    <div class="card-deck row"> 
 

 
    <div class="col-3"> 
 
     <!--event serv--> 
 
     <div class="card"> 
 
     <div class="card bg-inverse"> 
 
      <div class="card-block card-inverse event serv"> 
 
      <h5>Special event</h5> 
 
      <p class="lead">PVP/PVE</p> 
 
      <a href="#" class="btn btn-sm btn-secondary">Infos</a> 
 
      <a href="#" class="btn btn-sm btn-primary">Mods</a> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <!--/event serv--> 
 

 
    <div class="col-6"> 
 
     <!--island serv--> 
 
     <div class="card"> 
 
     <div class="card bg-inverse"> 
 

 
      <div class="card-block card-inverse island serv"> 
 
      <h5>The island</h5> 
 
      <p class="lead">PVE x 3</p> 
 
      <a href="#" class="btn btn-sm btn-secondary">Infos</a> 
 
      <a href="#" class="btn btn-sm btn-primary">Mods</a> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <!--/island serv--> 
 

 
    <div class="col-3"> 
 
     <!--scorched serv--> 
 
     <div class="card"> 
 
     <div class="card bg-inverse"> 
 
      <div class="card-block card-inverse scorched serv"> 
 
      <h5>Scorched earth</h5> 
 
      <p class="lead">PVE x 3</p> 
 
      <a href="#" class="btn btn-sm btn-secondary">Infos</a> 
 
      <a href="#" class="btn btn-sm btn-primary">Mods</a> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <!--/scorched serv--> 
 
    </div> 
 
</div>

それとも、ブートストラップ4を使用している場合、それは暗い背景色を割り当て、.serv::afterbackground画像をカバーしますので、それは.card.bg-inverse上だ.servにz-indexを与えます。他のテキストについて

.event::after { 
 
    background-image: url(https://images2.alphacoders.com/819/819763.jpg); 
 
    background-size: cover; 
 
    background-position: center; 
 
} 
 

 
.island::after { 
 
    background-image: url(https://s-media-cache-ak0.pinimg.com/originals/3b/91/6b/3b916b8b33b7aa08bf8fb920be2aa536.jpg); 
 
    background-size: cover; 
 
    background-position: center; 
 
} 
 

 
.scorched::after { 
 
    background-image: url(https://images4.alphacoders.com/819/819770.jpg); 
 
    background-size: cover; 
 
    background-position: center; 
 
} 
 

 
.card { 
 
    overflow: hidden; 
 
} 
 

 
.serv { 
 
    position: relative; 
 
    z-index: 1; 
 
} 
 

 
.serv::after { 
 
    content: ''; 
 
    position: absolute; 
 
    top: 0; left: 0; right: 0; bottom: 0; 
 
    z-index: -1; 
 
    transition: transform 0.7s; 
 
} 
 

 
.serv:hover::after { 
 
    transform: scale(1.1); 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container"> 
 
    <div class="card-deck row"> 
 

 
    <div class="col-3"> 
 
     <!--event serv--> 
 
     <div class="card"> 
 
     <div class="card bg-inverse"> 
 
      <div class="card-block card-inverse event serv"> 
 
      <h5>Special event</h5> 
 
      <p class="lead">PVP/PVE</p> 
 
      <a href="#" class="btn btn-sm btn-secondary">Infos</a> 
 
      <a href="#" class="btn btn-sm btn-primary">Mods</a> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <!--/event serv--> 
 

 
    <div class="col-6"> 
 
     <!--island serv--> 
 
     <div class="card"> 
 
     <div class="card bg-inverse"> 
 

 
      <div class="card-block card-inverse island serv"> 
 
      <h5>The island</h5> 
 
      <p class="lead">PVE x 3</p> 
 
      <a href="#" class="btn btn-sm btn-secondary">Infos</a> 
 
      <a href="#" class="btn btn-sm btn-primary">Mods</a> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <!--/island serv--> 
 

 
    <div class="col-3"> 
 
     <!--scorched serv--> 
 
     <div class="card"> 
 
     <div class="card bg-inverse"> 
 
      <div class="card-block card-inverse scorched serv"> 
 
      <h5>Scorched earth</h5> 
 
      <p class="lead">PVE x 3</p> 
 
      <a href="#" class="btn btn-sm btn-secondary">Infos</a> 
 
      <a href="#" class="btn btn-sm btn-primary">Mods</a> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <!--/scorched serv--> 
 
    </div> 
 
</div>

Answer 2

https://www.w3schools.com/css/css_pseudo_classes.asp

使用方法：ありません（a）は、翻訳のための.servインチそれはうまくいくはずです。