2015.04.29. 11:34, Enma22
1. Lekerekített képek:
img {
border-radius: 2em 2em 2em 2em;}
2. Keretes képek:
Itt lehet ugye sima keret, vagy külső keret, arról még nem írtam, ezután fogok.
img {
border: 3px solid #000000;}
img {
outline: 3px dotted #ededed;}
3. Összemegy a kép:
Itt linkként is meg lehet oldani, vagyis egy üres linknek adunk class funkciót háttérrel, és egyéb okossággal.
<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, amíg átvált egyik méretről a másikra. A transition-timing-funktion a sebességre utal, szerintem elhagyható, nem kívánok vele foglalkozni, mivel én sem értem 100%-osan, a négy szám egy-egy intervallumot jelent, de sima szöveggel is meg lehet adni az értéket. Nem térek ki rá, nem igazán kell sehová.
A képek méretéhez a képed eredeti méreteit add meg, vagy amekkorára szeretnéd, ha egy nagyobb képet szúrnál be. Ugyanis egy 400x500-as képnek is adhatsz más méreteket itt, mint ahogy akkor is, ha képként szúrod be az editorral. A hover részben elég a % is, annyival fogja összehúzni a képet. Ugyan ez működik élő linkekkel is, tehát ha elit cserét linkelsz rá mondjuk. Arra figyeljetek, hogy ha váltotok CKeditor és kódnézet között, akkor az üres link eltűnik, és újra be kell írni kódnézetben, forráskód nem jó, hacsak nem abban mentesz.
4. Nagyobb lesz a kép:
<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 kép vagy nagyobb lesz:
Egyszerű DIV konténeres megoldás 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 kép vagy fordítva:
img {
opacity: 0.7;
filter: alpha (opacity=70);}