CSSの代わりにHTMLから画像ソースをロード

Question

私はフォーカスを使用してサムネイルカルーセルにいくつかのコードを使用していましたが、カルーセルの機能を模倣することは可能ですか？ CSSの画像URLが必要です。フォーカスを使用すると可能ですか？

HTML：

<button class="mdT mdI1" ></button> 
<button class="mdT mdI2" ></button> 
<button class="mdT mdI3" ></button> 
<button class="mdT mdI4" ></button> 

のCss：この<div style="background-image: url(...)"></div>

よう

.mdT { 
     width:96px; 
     height:96px; 
     border:0px; 
     outline:0; 
     vertical-align:middle; 
     background-color:#AAAAAA; 
    } 
    .mdT:focus { 
     width:256px; 
     height:256px; 
    } 

/* Change Images Depending On Focus */ 
    .mdI1  { background-image:url('http://placehold.it/96x96/AAAAAA&text=img1');  } 
    .mdI1:focus { background-image:url('http://placehold.it/256x256/555555&text=Image+1'); } 
    .mdI2  { background-image:url('http://placehold.it/96x96/AAAAAA&text=img2');  } 
    .mdI2:focus { background-image:url('http://placehold.it/256x256/555555&text=Image+2'); } 
    .mdI3  { background-image:url('http://placehold.it/96x96/AAAAAA&text=img3');  } 
    .mdI3:focus { background-image:url('http://placehold.it/256x256/555555&text=Image+3'); } 
    .mdI4  { background-image:url('http://placehold.it/96x96/AAAAAA&text=img4');  } 
    .mdI4:focus { background-image:url('http://placehold.it/256x256/555555&text=Image+4'); } 

http://jsfiddle.net/1h68hs7n/

Answer 1

はい、それはありません、:focusに来るが、mouseoverを使用することができオプション。

---

更新

それは内側の要素を追加することが可能であるならば、私はそれが、画像を拡大縮小する方法を理解していないこの

.mdT { 
 
    position: relative; 
 
    width:96px; 
 
    height:96px; 
 
    border:0px; 
 
    outline:0; 
 
    vertical-align:middle; 
 
    background-color:#AAAAAA; 
 
} 
 
.mdT:focus { 
 
    width:256px; 
 
    height:256px; 
 
} 
 
.mdT span { 
 
    display: none; 
 
} 
 
.mdT:focus span { 
 
    display: inline-block; 
 
    position: absolute; 
 
    left: 0; top: 0; 
 
    right: 0; bottom: 0; 
 
}

<button class="mdT" style="background-image:url(http://placehold.it/96x96/AAAAAA&text=img1"> 
 
    <span style="background-image:url(http://placehold.it/256x256/555555&text=Image+1"></span> 
 
</button> 
 

 
<button class="mdT" style="background-image:url(http://placehold.it/96x96/AAAAAA&text=img2"> 
 
    <span style="background-image:url(http://placehold.it/256x256/555555&text=Image+2"></span> 
 
</button>