Pet Profile Coding Help

Hey everyone! I've searched through the Forums and Google for solutions, but I can't seem to find anything to help with this issue. I am trying to make the default pet, minion, and treasure images fade in when hovered over. I found a sort of fix for this issue, but it's not really what I was looking for because it makes only the minion and treasure images "blink" into existence rather quickly:

img { opacity: 0.2; }

img:hover { opacity: 1; } Also, I would like to know how to make my text fade in as well. The two pets' profiles I'm trying to use the codes on are Raziel (I'm not using his default pet image here) and Zuky. Below are the current codes I'm using, I just replaced any text I wrote with "WORDS".

Raziel's code

WORDS

WORDS


    Additional Information
    
WORDS


WORDS
[pWORDS
<style>

body {background-color: ; background-image: url(http://i.imgur.com/6q11hST.gif); background-repeat: no-repeat; background-position: center;height:650px;}

, , -ban, -ban-main, -lrc, -rrc {display:none;}
, , , , , , , , ,, h2, .pet_age_info_date, .pet_wco_info_date{display:none;}
, ,  {background:none}
{height:100% !important;}


img { 
  opacity: 0.2; 
} 

img:hover { 
  opacity: 1; 
}





 {width:240px;height:260px;overflow:auto; position:absolute;right:152px;top:166px;}



 {position:absolute; top:-900px;}
.pet_like {

top: -900px;

left:44px;

position: absolute;}


.pet_name { color:transparent; }



.pet_color_info {position:absolute; top:130px; right:910px;}
.pet_color_info { color:white; }
.owner {position:absolute; top:130px; right:800px;}
.owner { color:white; }


{position:absolute;top:428px;left:200px;}
 {text-indent: -9999px}
{ color:; }


div.scroll {
    background-color: none;
    width: 700px;
    height: 190px;
    overflow: auto;
}

.pet_like {

top: -900px;

left:44px;

position: absolute;}
}

<style>

Zuky's code

WORDS
WORDS

<style>
body {background-color: ; background-image: none; background-repeat: no-repeat; background-position: center;height:650px;}

, , -ban, -ban-main, -lrc, -rrc {display:none;}
, , , , , , , , , h2, .pet_age_info_date, .pet_wco_info_date{display:none;}
, ,  {background:none}
{height:100% !important;}


img { 
  opacity: 0.7; 
} 

img:hover { 
  opacity: 1; 
}


 {width:140px;height:140px;overflow:auto; position:absolute;top:355px;left:750px;}

 {position:absolute; top:355px; right:320px; width:210px; height:140px; padding:9px; background-color:transparent; color:transparent; overflow:auto;}


 {position:absolute; right:266px;}

img { 
  opacity: 0.7; 
} 

img:hover { 
  opacity: 1; 
}

.pet_like {

top: -900px;

left:44px;

position: absolute;}
}<style>

{absolute;center;}

img { 
  opacity: 0.7; 
} 

img:hover { 
  opacity: 1; 
}

</style>

WORDS
</style>

You can add this to the code (not the :hover code) for the fade-in effect: transition: 0.2s all ease;

So for example, if you want the images to have this effect, just write: img {opacity:0.2; transition: 0.2s all ease; } You can adjust the transition duration value (0.2s) to anything you like depending on whether you want it to fade it more quickly or slowly. Just remember to add s behind the value; otherwise, it won't work.

If you want some text to have the same effect, first you'll want to figure out which div contains that portion of text. All you need to do then is to add the same code above to that div. For example, since everything you write will go into , you can change the fade in effect as this: {opacity:0.2; transition: 0.2s all ease; } :hover {opacity:1; }

If you have more than one text area and want the effect to apply to only a few of those, you'll need to add this code to the div/ text area you want that effect for, instead of .

Logged Out

Pet Profile Coding Help

Replies