Помощ с hover ефект.

H

H_Kolev

Registered
Здравейте, как мога да направя този hover ефект?
Когато мишката я няма върху картинката:
http://prikachi.com/images/805/6076805O.png

Когато мишката е върху картинката:
http://prikachi.com/images/806/6076806H.png

Това ми е CSS кода:
[css]#myslides{
background:url(../images/slidebg.png) no-repeat;
margin:3px;
}

.stepcarousel{
position: relative; /*leave this value alone*/
overflow: scroll; /*leave this value alone*/
width: 880px; /*Width of Carousel Viewer itself*/
height: 162px; /*Height should enough to fit largest content's height*/
margin: 0px 0px 0px 43px;

}

.stepcarousel .belt{
position: absolute; /*leave this value alone*/
left: 0;
top: 0;
margin:2px 0px 0px 0px;
}
.stepcarousel .panel{
float: left; /*leave this value alone*/
overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
margin: 4px 12px ; /*margin around each panel*/
width:117px; /*Width of each panel holding each content. If removed, widths should be individually defined on each content DIV then. */
background:#D8D8D8;
height:149px;
border:1px solid #C4C4C4;
}
.stepcarousel .panel p{
text-align: left; /*leave this value alone*/
overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
margin: 5px 5px ; /*margin around each panel*/

}

.stepcarousel .panel h2{
height:16px;
overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
margin: 0px 5px ; /*margin around each panel*/
font-size:13px;
font-weight:normal;
text-align:center;
font-family:Tahoma,century gothic,Arial,verdana, sans-serif;
text-transform:uppercase;

}
.stepcarousel .panel h2 a:visited ,.stepcarousel .panel h2 a:link{
color:#8B979F;

}
.stepcarousel .panel img{
width:113px;
height:145px;
background:#D6D6D6; /*clip content that go outside dimensions of holding panel DIV*/
margin: 2px 1px 1px 2px; /*margin around each panel*/
padding:0px 0px;
border:none;
}


.stepcarousel .belt{
position: absolute; /*leave this value alone*/
left: 0;
top: 0;
margin:2px 0px 0px 0px;
}







.ozet {margin-top:-17px;padding:2px;color:#484848;text-align:center;overflow:hidden;height:12px;font-size:11px;background:#D5D5D5;opacity:0.9;filter:alpha(opacity=90)}




.stepcarousel .panel{
float: left; /*leave this value alone*/
overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
margin: 4px 12px ; /*margin around each panel*/
width:117px; /*Width of each panel holding each content. If removed, widths should be individually defined on each content DIV then. */
background:#D8D8D8;
height:149px;
border:1px solid #C4C4C4;
}
.stepcarousel .panel p{
text-align: left; /*leave this value alone*/
overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
margin: 5px 5px ; /*margin around each panel*/

}

.stepcarousel .panel h2{
height:16px;
overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
margin: 0px 5px ; /*margin around each panel*/
font-size:13px;
font-weight:normal;
text-align:center;
font-family:Tahoma,century gothic,Arial,verdana, sans-serif;
text-transform:uppercase;

}
.stepcarousel .panel h2 a:visited ,.stepcarousel .panel h2 a:link{
color:#8B979F;

}
.stepcarousel .panel img{
width:113px;
height:145px;
background:#D6D6D6; /*clip content that go outside dimensions of holding panel DIV*/
margin: 2px 1px 1px 2px; /*margin around each panel*/
padding:0px 0px;
border:none;
}
[/css]

А това ми е HTML/PHP кода:
PHP: 
		<div class="box">
		<div class="head"><b>ПОСЛЕДНО ДОБАВЕНИ ФИЛМИ</b></div>
	
 
 <script type="text/javascript" src="../js/jquery.js?ver=1.7.1"></script>

<script type="text/javascript" src="../js/scroll.js"></script>	
 
<script type="text/javascript">

stepcarousel.setup(stepcarousel.animals = {
galleryid: 'mygallery', //id of carousel DIV
beltclass: 'belt', //class of inner "belt" DIV containing all the panel DIVs
panelclass: 'panel', //class of panel DIVs each holding content
autostep: {enable:true, moveby:2, pause:2000},
panelbehavior: {speed:8000, wraparound:true, wrapbehavior:'slide', persist:true},
defaultbuttons: {enable: true, moveby: 1, leftnav: ['../images/sol.png', -42, 0], rightnav: ['../images/sag.png', 0, 0]},
statusvars: ['statusA', 'statusB', 'statusC'], //register 3 variables that contain current panel (start), current panel (last), and total panels
contenttype: ['inline'] //content setting ['inline'] or ['ajax', 'path_to_external_file']
})
jQuery(function($){
var config = stepcarousel.animals;
function resume(){
clearTimeout(config.buttonstimer);
config.buttonstimer = setTimeout(function(){
config.autostep.status = '';
$('#' + config.galleryid).trigger('mouseleave');
}, config.autostep.pause);
}
$('#prev_2, #next_2').click(function(e){e.preventDefault(); resume();}).mouseleave(resume);
});
</script>
 
<div id="myslides">
<div id="mygallery" class="stepcarousel">
<div class="belt">

<?php
                            while ($trailerR = mysql_fetch_array($trailerQ))
                            {
				$ENGtitle = linkcreator($trailerR[engtitle]);
                        ?>
<div class="panel">
 <a href="movie-<?php print $trailerR[id]."-".$ENGtitle; ?>" title="<?php print $trailerR[engtitle]; ?>"><img src="images/thumbs/thumb_<?php print $trailerR[poster]; ?>" height="131" width="193" alt="poster"/></a>                 
 <?php
   $date = date("Y", $trailerR[Premiere]);
     print "<div class='ozet'>".$trailerR[title]."</div>";
    if ($trailerR[bg] != 0)
    {
   print "<img src='../images/prevod.png' title='превод'/><br/>";
    }
    $brQ = mysql_query("SELECT count(id) as br FROM vote WHERE idTrailer LIKE '$trailerR[id]'") or die (mysql_error());
      $br = mysql_fetch_array($brQ);
          if ($br[br] >= 3)
     {
       show_rtg($trailerR[reiting]) ;
     }
     ?>
             
</div>
 <?php } ?>
</div>
</div></div> 
</div>

В момента изглежда така:
http://prikachi.com/images/807/6076807E.jpg

Искам да го направя когато се отиде с мишката върху картинката, да се показва полу-прозрачна картинка върху нея. Пробвах с CSS, но явно греша някъде защото не ми се получава... Пътят към полу-прозрачната картинка е "images/watchmoviebg.png"
Ако някой може да помогне, благодаря предварително (+1)
 
Тука съм ти дал пример как може да се постигне този ефект със CSS.

Трябва да си го нагодиш, за да ти върши работа.


http://jsfiddle.net/3UFGa/
 
Не ми се получава.. за това съм дал двата ми кода, някой ако може да ги редактира и да се получи. Ако можете, помагайте. Благодаря ви предварително!
Поздрави!

Това е полу-прозрачната картинка която искам да излиза отгоре:
http://prikachi.com/images/691/6077691I.png
 
deam0n го е дал супер пример,просто го "вкарай" в твоя код,иначе едва ли някой ще ти редактира кода при положение,че вече го имаш дадено...
:)
 
explozen каза:
Просто направи при ховър да се сменя картинката и готово.
Увеличете...
Как? .. Просто ако някой може, нека ми редактира кодовете.. Сега гледах в интернет, и напълно се обърках...
 
Може примерно при ховър да се сменя background на див,тоест вместо да е Img src да е background:url(images/image.png) и същия клас със :hover
да е само че друга картинка
HTML: 
<div class="myclass" style="background:url(pat_do_kartinkata_na_videoto.jpg;"></div>

[css]
.myclass{
width:100px;
height:100px;
border:1px solid;
}
.myclass:hover{
background:url(http://prikachi.com/images/691/6077691I.png);
}
[/css]
 
Hous каза:
Може примерно при ховър да се сменя background на див,тоест вместо да е Img src да е background:url(images/image.png) и същия клас със :hover
да е само че друга картинка
HTML: 
<div class="myclass" style="background:url(pat_do_kartinkata_na_videoto.jpg;"></div>

[css]
.myclass{
width:100px;
height:100px;
border:1px solid;
}
.myclass:hover{
background:url(http://prikachi.com/images/691/6077691I.png);
}
[/css]
Увеличете...

Направих това, но hover картинката излиза зад картинката на видеото...
 
Дам не съм обърнал внимание,защото ако зададеш style директно то реално ще пренапише правилото зададено му от class-а

Код: 
<style>
.myclass{
width:100px;
height:100px;
border:1px solid;
background:url(http://upload.wikimedia.org/wikipedia/commons/thumb/a/ac/Approve_icon.svg/600px-Approve_icon.svg.png) center;
}
.myclass:hover{
background:url(http://prikachi.com/images/691/6077691I.png);
}
</style>
<div class="myclass" style=""></div>
трябва пътя до картинката на видеото да се постави вместо http://upload.wikimedia.org/wikipedia/commons/thumb/a/ac/Approve_icon.svg/600px-Approve_icon.svg.png


Друг вариант
Код: 
<a href="link"><img src="video_1.jpg" onmouseover="this.src='http://prikachi.com/images/691/6077691I.png'" onmouseout="this.src='video_1.jpg'" /></a>
 
Hous каза:
Друг вариант
Код: 
<a href="link"><img src="video_1.jpg" onmouseover="this.src='http://prikachi.com/images/691/6077691I.png'" onmouseout="this.src='video_1.jpg'" /></a>
Увеличете...

Така стана, но не са двете картинки една върху друга, а се показва само втората картинка, целта ми е да се получи полу-прозрачния ефект ( задал съм черен фен с видимост 60% в photoshop на втората картинка, за да може да се вижда зад нея и обложката на филма). Ако това стане, ще е повече от перфектно!
 
:D

Код: 
<a href="link"><img src="blanck.png" style="width:100px;height:100px;border:1px solid;background:url(http://upload.wikimedia.org/wikipedia/commons/thumb/a/ac/Approve_icon.svg/600px-Approve_icon.svg.png) center;" 
onmouseover="this.src='http://prikachi.com/images/691/6077691I.png'" onmouseout="this.src='blanck.png'" /></a>
само сложи blanck.png да е една празна картинка (png/gif формат със 100% прозрачност) :)
 
Трябва да си влезнал или регистриран, за да отговориш тук.

Back
Горе