2015.04.29. 11:34, Enma22
1. Lekerektett kpek:
img {
border-radius: 2em 2em 2em 2em;}

2. Keretes kpek:
Itt lehet ugye sima keret, vagy kls keret, arrl mg nem rtam, ezutn fogok.
img {
border: 3px solid #000000;}
img {
outline: 3px dotted #ededed;}

3. sszemegy a kp:
Itt linkknt is meg lehet oldani, vagyis egy res linknek adunk class funkcit httrrel, s egyb okossggal.
<a class="ssze"></a>
.ssze {
background-image: url(//babablog.gportal.hu/portal/babablog/image/gallery/tn_1423568347_65.jpg);
background-size: 100%;
background-repeat: no-repeat;
background-position: center;
background-clip: border-box;
transition: background-size 0.2s;
-webkit-transition: background-size 0.2s;
transition-timing-function: cubic-bezier(.07,1.41,.82,1.41);
display: inline-block;
width: 103px;
height: 120px;
text-decoration: none;
cursor: pointer;
}
.ssze:hover {
background-size: 80%;
}
A transition az tmenetet jelent, vagyis hogy mennyi ideig tartson, amg tvlt egyik mretrl a msikra. A transition-timing-funktion a sebessgre utal, szerintem elhagyhat, nem kvnok vele foglalkozni, mivel n sem rtem 100%-osan, a ngy szm egy-egy intervallumot jelent, de sima szveggel is meg lehet adni az rtket. Nem trek ki r, nem igazn kell sehov.
A kpek mrethez a kped eredeti mreteit add meg, vagy amekkorra szeretnd, ha egy nagyobb kpet szrnl be. Ugyanis egy 400x500-as kpnek is adhatsz ms mreteket itt, mint ahogy akkor is, ha kpknt szrod be az editorral. A hover rszben elg a % is, annyival fogja sszehzni a kpet. Ugyan ez mkdik l linkekkel is, teht ha elit csert linkelsz r mondjuk. Arra figyeljetek, hogy ha vltotok CKeditor s kdnzet kztt, akkor az res link eltnik, s jra be kell rni kdnzetben, forrskd nem j, hacsak nem abban mentesz.
4. Nagyobb lesz a kp:
<a class="nagy"></a>
.nagy {
background-image: url(//babablog.gportal.hu/portal/babablog/image/gallery/tn_1423568347_65.jpg);
background-size: 80%;
background-repeat: no-repeat;
background-position: center;
background-clip: border-box;
transition: background-size 0.2s;
-webkit-transition: background-size 0.2s;
transition-timing-function: cubic-bezier(.07,1.41,.82,1.41);
display: inline-block;
width: 103px;
height: 120px;
text-decoration: none;
cursor: pointer;
}
.nagy:hover {
background-size: 100%;
}
5. ssze megy a kp vagy nagyobb lesz:
Egyszer DIV kontneres megolds lesz ez:
<div class="proba">
<img src="//babablog.gportal.hu/portal/babablog/image/gallery/tn_1423568347_65.jpg" /></div>
<style type="text/css">
.proba img {
width: 103px;}
.proba img:hover {
width: 200px;}
</style>
6. ttetsz lesz a kp vagy fordtva:
img {
opacity: 0.7;
filter: alpha (opacity=70);}
