$("img[name$='system_hz_img']").live('click', function(){ if($("input:radio[name=system_hz]").is(":checked")){ $("img[name$='system_hz_img']").removeClass("frame_system_hz"); $(this).addClass("frame_system_hz"); } });
dodaję klasę do zdjęcia która:
img.frame_system_hz{ border:2px solid #ff0000; -webkit-box-shadow: 1px 1px 1px 1px rgba(50, 50, 50, 0.1); -moz-box-shadow: 1px 1px 1px 1px rgba(50, 50, 50, 0.1); box-shadow: 1px 1px 1px 1px rgba(50, 50, 50, 0.1); background: #fff; opacity:0.4; filter:alpha(opacity=40); }
bluruje mi zdjęcie i dodaje obramowanie. Efekt jest ok ale jeszcze jest mało czytelny. Chciałbym dodatkowo aby przy wyborze zdjęcia do blurowania i ramki dodał sie np. czerwony "tick" (ptaszek) jako zewnętrzna warstwa na zdjęciu. Tak by ostatecznym wynikiem było zblurowane lecz widoczne zdjęcie w czerwonej ramce z czerwonym znakiem "tick".
Jak to zrobić? Bez powielania zdjęć (bez znaczka i po kliknięciu, wyborze ze znaczkiem).