Resim üzerine gelince play ikonu çıksın

15-12-2014, 23:56:16

Kimlik doğrulama veya yönetimden onay bekliyor.

Arkadaşlar bir türlü yapamadım yardımlarınızı bekliyorum. Amacım şu. iki türlü yapabiliriz. mause ile resmin üzerine gelince play ikonu çıksın. yada direk hepsinin üstünde play ikonu çıksın hangisi daha basit ve kolay olursa yapabilirsek sevinirim.

css kodlarım.

.videolar {
	margin::0px auto;
	width:auto;
	height:auto;
	display:inline;
}
.gallery {
	margin:auto;
	width:auto;
	display:inline;
}
.gallery li {
	margin: 10px;
	_margin: 5px;
	padding: 0;
	float: left;
	position: relative;
	width: 155px;
	height: 150px;
	display:inline;
}
.gallery img {
	background: #fff;
	border: solid 1px #ccc;
	padding: 4px;
	display:inline;
}
.gallery span {
	width: 20px;
	height: 18px;
	display: block;
	position: absolute;
	bottom: 40px;
	right: 5px;
	display:inline;
}

.gallery .photo {
	background: url(../images/photo.gif) no-repeat;
}
.gallery .video {
	background: url(../images/video.gif) no-repeat;
}
.gallery a {
	text-decoration: none;
}
.gallery a:hover img  {
	border-color: #666;
}
.gallery a:hover span {
	background-position: left -22px;
}

php kodlarım

<div class="videolar">
               <a href="http://www.siteismi.net/<?php echo $id;?>/<?=sef($adi)?>.html"><img src="<?php echo $resim; ?>" alt="ilginç videolar"/></a>
               <div class="videolar_baslik"> <a href="http://www.siteismi.net/<?php echo $id;?>/<?=sef($adi)?>.html"><?php echo $adibol; ?></a></div>
		   </div>

yardımlarınız için şimdiden teşekkürler

16-12-2014, 01:09:16

#2

kemerly

Merhaba;

Konu ile alakalı hızlıca hazırladığım bir mantık ile kolaylıkla bu problemi aşabilirsiniz. css' de bulunan :after / :before komutları fazlasıyla işinizi görebilir. Örnek olarak sizin yapınız üzerinden yazıyorum. Bir problem olursa yardımcı olmaya çalışırım. İlk önce açıklamayı yazıyorum. En alt satırda da kodları yazıyorum.

İlk olarak video resminizi bir div içine alabilirsiniz (videolar_resim). Daha sağlıklı olacaktır diye düşünüyorum. Ardından css' in :after komutu ile play ikonu üzerine yerleştirip absolute ile konumunu ayarlayabilirsiniz. Bu arada hızlı hazırlama açısından ben font awesome kullandım. siz kendi ikon' unuzu belirleyebilirsiniz. font awesome' a ait css dosyasını import ettim zaten. İnceleyince anlayacaksınızdır sizde.

<style>

///.... sizin css kodlarınız.....

@import url(http://maxcdn.bootstrapcdn.com/font-...some.min.css);
.videolar_resim{ position:relative; width:200px; height:200px;}
.videolar_resim img{ width:100%; height:100%}
.videolar_resim a:after{ content:"\f144"; font-family:FontAwesome; position:absolute; left:44%; top:40%; z-index:888; color:#fff; font-size:36px; display:none;}
.videolar_resim a:hover:after{ display:block;}

</style>

<html>
<div class="videolar">
<div class="videolar_resim"><a href="#"><img src="resim.jpg" alt="ilginç videolar"/></a></div>
<div class="videolar_baslik"> <a href="#">video ismi</a></div>
</div>
</html>

16-12-2014, 22:22:37

#3

herseysizinicin

üstad üstteki kodlara uyarlayabilirmisin acaba.

17-12-2014, 17:02:14

#4

herseysizinicin

arkadaşlar yardımcı olacak yokmu acaba.

herseysizinicin adlı üyeden alıntı: mesajı görüntüle

Arkadaşlar bir türlü yapamadım yardımlarınızı bekliyorum. Amacım şu. iki türlü yapabiliriz. mause ile resmin üzerine gelince play ikonu çıksın. yada direk hepsinin üstünde play ikonu çıksın hangisi daha basit ve kolay olursa yapabilirsek sevinirim.

css kodlarım.

.videolar {
	margin::0px auto;
	width:auto;
	height:auto;
	display:inline;
}
.gallery {
	margin:auto;
	width:auto;
	display:inline;
}
.gallery li {
	margin: 10px;
	_margin: 5px;
	padding: 0;
	float: left;
	position: relative;
	width: 155px;
	height: 150px;
	display:inline;
}
.gallery img {
	background: #fff;
	border: solid 1px #ccc;
	padding: 4px;
	display:inline;
}
.gallery span {
	width: 20px;
	height: 18px;
	display: block;
	position: absolute;
	bottom: 40px;
	right: 5px;
	display:inline;
}

.gallery .photo {
	background: url(../images/photo.gif) no-repeat;
}
.gallery .video {
	background: url(../images/video.gif) no-repeat;
}
.gallery a {
	text-decoration: none;
}
.gallery a:hover img  {
	border-color: #666;
}
.gallery a:hover span {
	background-position: left -22px;
}

php kodlarım

<div class="videolar">
               <a href="http://www.siteismi.net/<?php echo $id;?>/<?=sef($adi)?>.html"><img src="<?php echo $resim; ?>" alt="ilginç videolar"/></a>
               <div class="videolar_baslik"> <a href="http://www.siteismi.net/<?php echo $id;?>/<?=sef($adi)?>.html"><?php echo $adibol; ?></a></div>
		   </div>

yardımlarınız için şimdiden teşekkürler

17-12-2014, 21:40:47

#5

omrumdely

css den bulunduğu dive hover verilirse olur.

18-12-2014, 21:45:28

#6

herseysizinicin

arkadaşlar yardımcı olacak yokmu acaba.

19-12-2014, 00:35:09

#7

~Aykut

http://codepen.io/anon/pen/RNRxep

20-12-2014, 00:06:55

#8

herseysizinicin

üstad ellerine sağlık güzel olmuş. ancak benim kodlamada yemiyor bu olay. bende bu şekilde yapıyordum ancak olmuyor. resim ya altında ya üstünde çıkıyor. benim yukarda verdiğim kodlara göre ayarlayabilirseniz sevinirim.