lostyazilim

Resim değiştirme buton yardım

5 Mesajlar 3.884 Okunma
lstbozum
wmaraci reklam

ozgun ozgun WM Aracı Kullanıcı
  • Üyelik 29.12.2017
  • Yaş/Cinsiyet 34 / E
  • Meslek serbest
  • Konum İstanbul Avrupa
  • Ad Soyad Ö** Ö**
  • Mesajlar 89
  • Beğeniler 13 / 12
  • Ticaret 2, (%50)
Merhaba Arkadaslar assağıdaki sitedeki ortadaki resimlerin geçişine benzer html css kodlarıyla aynısını yapabilirmiyiz

şimdiden herkese teşekkürler

https://demo.themeftc.com/karo/home9/
 

 

wmaraci
reklam

carasar carasar All ızz well... Kullanıcı
  • Üyelik 29.10.2016
  • Yaş/Cinsiyet 32 / E
  • Meslek Öğretmen
  • Konum Konya
  • Ad Soyad O** K**
  • Mesajlar 1116
  • Beğeniler 499 / 498
  • Ticaret 16, (%100)
Şu framework işinizi görebilir.

http://imagehover.io/
ozgun

kişi bu mesajı beğendi.

ozgun ozgun WM Aracı Kullanıcı
  • Üyelik 29.12.2017
  • Yaş/Cinsiyet 34 / E
  • Meslek serbest
  • Konum İstanbul Avrupa
  • Ad Soyad Ö** Ö**
  • Mesajlar 89
  • Beğeniler 13 / 12
  • Ticaret 2, (%50)
hocam ilgilendiğin için teşekkür ederim Allah razı olsun ama ortada resimvar mesela resmin üstünde 3 tane buton var butonlara basınca resim değişsin öle bişe istiyorum yinede çok teşekkürler
 

 

carasar carasar All ızz well... Kullanıcı
  • Üyelik 29.10.2016
  • Yaş/Cinsiyet 32 / E
  • Meslek Öğretmen
  • Konum Konya
  • Ad Soyad O** K**
  • Mesajlar 1116
  • Beğeniler 499 / 498
  • Ticaret 16, (%100)
ozgun hocam kusura bakma. Ben aşağıdaki resimlerdeki animasyonu istediniz sandım. Slideri istemişsiniz.
Şu size örnek olabilir.

HTML










Resim 1





Resim 2





Resim 3





Resim 4













CSS



.slider {
height: 100%;
position: relative;
overflow: hidden;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-flow: row nowrap;
-ms-flex-flow: row nowrap;
flex-flow: row nowrap;
-webkit-box-align: end;
-webkit-align-items: flex-end;
-ms-flex-align: end;
align-items: flex-end;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
}
.slider__nav {
width: 12px;
height: 12px;
margin: 2rem 12px;
border-radius: 50%;
z-index: 10;
outline: 6px solid #ccc;
outline-offset: -6px;
box-shadow: 0 0 0 0 #333, 0 0 0 0 rgba(51, 51, 51, 0);
cursor: pointer;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.slider__nav:checked {
-webkit-animation: check 0.4s linear forwards;
animation: check 0.4s linear forwards;
}
.slider__nav:checked:nth-of-type(1) ~ .slider__inner {
left: 0%;
}
.slider__nav:checked:nth-of-type(2) ~ .slider__inner {
left: -100%;
}
.slider__nav:checked:nth-of-type(3) ~ .slider__inner {
left: -200%;
}
.slider__nav:checked:nth-of-type(4) ~ .slider__inner {
left: -300%;
}
.slider__inner {
position: absolute;
top: 0;
left: 0;
width: 400%;
height: 100%;
-webkit-transition: left 0.4s;
transition: left 0.4s;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-flow: row nowrap;
-ms-flex-flow: row nowrap;
flex-flow: row nowrap;
}
.slider__contents {
height: 100%;
padding: 2rem;
text-align: center;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
-webkit-flex-flow: column nowrap;
-ms-flex-flow: column nowrap;
flex-flow: column nowrap;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
}
.slider__image {
font-size: 2.7rem;
color: #2196F3;
}
.slider__caption {
font-weight: 500;
margin: 2rem 0 1rem;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
text-transform: uppercase;
}
.slider__txt {
color: #999;
margin-bottom: 3rem;
max-width: 300px;
}

@-webkit-keyframes check {
50% {
outline-color: #333;
box-shadow: 0 0 0 12px #333, 0 0 0 36px rgba(51, 51, 51, 0.2);
}
100% {
outline-color: #333;
box-shadow: 0 0 0 0 #333, 0 0 0 0 rgba(51, 51, 51, 0);
}
}

@keyframes check {
50% {
outline-color: #333;
box-shadow: 0 0 0 12px #333, 0 0 0 36px rgba(51, 51, 51, 0.2);
}
100% {
outline-color: #333;
box-shadow: 0 0 0 0 #333, 0 0 0 0 rgba(51, 51, 51, 0);
}
}




Daha farklı isterseniz jquery slider diye aratın bir çok örnek bulabilirsiniz.
 

 

wmaraci
wmaraci

ozgun ozgun WM Aracı Kullanıcı
  • Üyelik 29.12.2017
  • Yaş/Cinsiyet 34 / E
  • Meslek serbest
  • Konum İstanbul Avrupa
  • Ad Soyad Ö** Ö**
  • Mesajlar 89
  • Beğeniler 13 / 12
  • Ticaret 2, (%50)
Hocam Gösterdiğin İlgi alakadan ötürü sana teşekkür ediyorum güzel insan Allah yolunu acık etsin güzel günler gör çok yardımcı oldun yeniden çok teşekkürler
 

 

wmaraci
Konuyu toplam 2 kişi okuyor. (0 kullanıcı ve 2 misafir)
Site Ayarları
  • Tema Seçeneği
  • Site Sesleri
  • Bildirimler
  • Özel Mesaj Al