写真の載せ方 CSSだけでも・・・
写真の上にカーソルを載せると・・・・・・
CSSだけでもこんなことができます
が
、設定が面倒なんです・・・・
ブログに使う写真がすべて同じサイズの写真だけだって方にはお勧めしますが
違うサイズの写真では上のようにおかしくなります
前に同じ写真を載せていますのでくらべたらおかしいことがわかります
大きくなった写真をクリックしても確認できます
/*■■■■■ ポップアップ ■■■■■*/
p.pop {
margin: 0 1em 0 0;
padding: 0;
width: 175px;
height: 196px;
float: left;
}
p.pop a {
width: 175px;
height: 196px;
display: block;
overflow: hidden;
}
p.pop > a {
overflow: visible;
}
p.pop a img {
width: 175px;
height: 196px;
z-index: 1;
}
p.pop a:hover {
overflow: scroll;
}
p.pop > a:hover {
overflow: visible;
}
p.pop a:hover img {
position: relative;
top: -100px;
left: -40px;
width: 304px;
height: 342px;
z-index: 2;
}
/* ■■ ここまで ■■ */
なので、・・・説明はヌキです
ヒント?
