Hover Over Image Otms

[Todge]

I thought you wanted a better transition..

Can you put the first code back on your forum so I can take a look.. Hopefully getting that to work should be fairly simple (famous last words)..

[Alanna 🥀🖤]

I wanted it to work better but not necessarily a different code, especially if the other ones won't even work. The first one is back up.

Also, could it fade in more smoothly instead of abruptly?

Todge, I want to note that I tried using CSS to do this like so:

.otm{
   opacity:0;
   -webkit-transition-duration:1s;
   transition-duration:1s;
   -moz-transition-duration:1s;
}
.otm:hover{
   opacity:1;
}
<div style="background-image: url(http://imageshack.us/a/img694/4134/o5vn.png); height:225px; width:225px; border:10px solid black;float:left;margin-right:15px;margin-bottom:30px;">
<div class="otm">
                   <div style="margin-top:13px; margin-left:13px; height: 200px; width: 200px; background-color: #fff; display: none; line-height:12px;">
                       <BR>
                       <div style="text-align:center;"><font size="5"><i><b>BEST GRAPHICS</b></i></font><br>
                       <a href="tba">graphics set</a> // <a href="tba">creator</a><br><br>
                       </div>
                       <div style="margin-left:15px;width:170px;height:130px;overflow:auto;text-align:justify;">
                           <font size="3">SKIN NAME IS A LIGHT/DARK SKIN WITH AMAZING GRAPHICS AND WELL DESIGNED LAYOUTS AND FEELS!
                           </font>
                       </div>
</div>
                   </div>
               </div>

But it wouldn't work... I was hoping it would, but... yeah.

[Todge]

Your CSS is fine..

You can not use 'display: none' while using a transition. Display: none; tells the browser not to remove that cell, so any styling will not work until the cell is re-embedded.

Once that is removed, everything seems to work fine...

<div style="background-image: url(http://imageshack.us/a/img694/4134/o5vn.png); height:225px; width:225px; border:10px solid black;float:left;margin-right:15px;margin-bottom:30px;">
  <div class="otm">
     <div style="margin-top:13px; margin-left:13px; height: 200px; width: 200px; background-color: #fff; line-height:12px;">
     <BR>
        <div style="text-align:center;"><font size="5"><i><b>BEST GRAPHICS</b></i></font><br>
        <a href="tba">graphics set</a> // <a href="tba">creator</a><br><br>
        </div>
        <div style="margin-left:15px;width:170px;height:130px;overflow:auto;text-align:justify;">
        <font size="3">SKIN NAME IS A LIGHT/DARK SKIN WITH AMAZING GRAPHICS AND WELL DESIGNED LAYOUTS AND FEELS!</font>
        </div>
     </div>
  </div>
</div>

[Alanna 🥀🖤]

How the heck did that display none get in there? Weird...
Okay, so now it is fading in and out nicely but it still isn't registering on their entire image... why is that? It only appears when I put my cursor on the top of the image.

[Todge]

Sept 13, 2013 21:04:36 GMT -8 @khristian said:

How the heck did that display none get in there? Weird...
Okay, so now it is fading in and out nicely but it still isn't registering on their entire image... why is that? It only appears when I put my cursor on the top of the image.

That I cannot understand, it works fine on my test forum in all browsers.. Try adding a height to the 'otm' <div>

[Alanna 🥀🖤]

Hrm, didn't seem to do the trick:
<div style="background-image: url(http://imageshack.us/a/img15/296/9d5y.png); height: 225px; width: 225px; border:10px solid black;float:left;margin-right:15px;margin-bottom:30px;">
               <div class="otms" style="height:200px; width:200px;">    
                <div style="margin-top:13px; margin-left:13px; height: 200px; width: 200px; background-color: #fff; line-height:12px;">
<BR>
                       <div style="text-align:center;"><font size="5"><i><b>BEST SITE SKIN</b></i></font><br>
                       <a href="tba">skin name</a> // <a href="tba">creator</a><br><br>
                       </div>
                       <div style="margin-left:15px;width:170px;height:130px;overflow:auto;text-align:justify;">
                           <font size="3">SKIN NAME IS A LIGHT/DARK SKIN WITH AMAZING GRAPHICS AND WELL DESIGNED LAYOUTS AND FEELS!
                           </font>
                       </div>
                </div>
               </div>
</div>

[Wormopolis]

hey Todge, I wrote this for a V4 forum a while back if it takes it off your plate...


<center>
<script type="text/javascript">

// OTM boxes // by Wormopolis - www.wormocodes.com // keep heder intact - do not repost

var OTMboxWidth="200"; var OTMboxHeight="134"; //these 2 dimensions must match your cover image. make all cover images the same dimensions

var OTMarray=[
["Member of the Month","http://i197./aa250/WORMOPOLIS/OTMcupcake.jpg","this is a bunch of text. this is a bunch of text. this is a bunch of text. this is a bunch of text. this is a bunch of text. this is a bunch of text. this is a bunch of text. this is a bunch of text. this is a bunch of text. this is a bunch of text. this is a bunch of text. this is a bunch of text. this is a bunch of text. this is a bunch of text. this is a bunch of text. this is a bunch of text. "],
["Thread of the Month","http://i197./aa250/WORMOPOLIS/OTMcupcake.jpg","this is a bunch of text. this is a bunch of text. this is a bunch of text. this is a bunch of text. this is a bunch of text. this is a bunch of text. this is a bunch of text. this is a bunch of text. this is a bunch of text. this is a bunch of text. this is a bunch of text. this is a bunch of text. this is a bunch of text. this is a bunch of text. this is a bunch of text. this is a bunch of text. "],
["Male of the Month","http://i197./aa250/WORMOPOLIS/OTMcupcake.jpg","this is a bunch of text. this is a bunch of text. this is a bunch of text. this is a bunch of text. this is a bunch of text. this is a bunch of text. this is a bunch of text. this is a bunch of text. this is a bunch of text. this is a bunch of text. this is a bunch of text. this is a bunch of text. this is a bunch of text. this is a bunch of text. this is a bunch of text. this is a bunch of text. "],
["Female of the Month","http://i197./aa250/WORMOPOLIS/OTMcupcake.jpg","this is a bunch of text. this is a bunch of text. this is a bunch of text. this is a bunch of text. this is a bunch of text. this is a bunch of text. this is a bunch of text. this is a bunch of text. this is a bunch of text. this is a bunch of text. this is a bunch of text. this is a bunch of text. this is a bunch of text. this is a bunch of text. this is a bunch of text. this is a bunch of text. "] //no comma last one
];
//[title, cover image url, text for the hidden scrollbox]
//no need to edit below
document.write('<div id="OTMcontainer"></div>'); var temphold="<center>"; function handleReshow(e) { if (!e) var e = window.event; var tg = (window.event) ? e.srcElement : e.target; var reltg = (e.relatedTarget) ? e.relatedTarget : e.toElement; if (reltg.id.match(/scroll/) || (tg.nodeName.match(/img/i) && tg.parentNode.style.letterSpacing!='')) return; if (tg.nodeName.match(/img/i)) tg=tg.parentNode.previousSibling; tg.nextSibling.style.letterSpacing=''; tg.nextSibling.style.visibility='visible'; tg.nextSibling.style.opacity='100'; var tm2=setTimeout("document.getElementById('" + tg.nextSibling.id + "').style.letterSpacing='';",2000); } for (od=0; od<OTMarray.length; od++) { temphold+='<div id="OTMlabel' + od + '" class="OTMlabel">' + OTMarray[od][0]+ '</div><div id="OTMinner'+od+'" style="padding: 2px; width:' + OTMboxWidth+ 'px; height:' + OTMboxHeight+ 'px; " onmouseout="handleReshow(event);"><div id="OTMscroll'+od+'" style="width:' + OTMboxWidth+ 'px; height:' + OTMboxHeight+ 'px; overflow-y:auto; position:absolute;" >' + OTMarray[od][2] + '</div><div class="OTMdiv" id="OTMcover'+od+'" width="' + OTMboxWidth+ 'px" height="' + OTMboxHeight+ 'px" style="position: absolute;" onmouseover="this.style.visibility=\'hidden\'; this.style.opacity=\'0\'; var tm=setTimeout(function() {document.getElementById(\'OTMcover' + od + '\').style.letterSpacing=\'1\';},2000);"><img src="' + OTMarray[od][1]+ '" ></div></div><br>'; } document.getElementById('OTMcontainer').innerHTML=temphold+"</center>";

</script>


<style type="text/css">
.OTMdiv
{
transition:visibility 2s, opacity 2s;
-moz-transition: visibility 2s, opacity 2s; /* Firefox 4 */
-webkit-transition:visibility 2s, opacity 2s; /* Safari and Chrome */
-o-transition:visibility 2s, opacity 2s; /* Opera */
}
.OTMlabel
{
font-size:18;
font-weight: bold;
}
</style>

</center>


[Todge]

Sept 14, 2013 10:40:58 GMT -8 @khristian said:

Hrm, didn't seem to do the trick:
<div style="background-image: url(http://imageshack.us/a/img15/296/9d5y.png); height: 225px; width: 225px; border:10px solid black;float:left;margin-right:15px;margin-bottom:30px;">
               <div class="otms" style="height:200px; width:200px;">    
                <div style="margin-top:13px; margin-left:13px; height: 200px; width: 200px; background-color: #fff; line-height:12px;">
<BR>
                       <div style="text-align:center;"><font size="5"><i><b>BEST SITE SKIN</b></i></font><br>
                       <a href="tba">skin name</a> // <a href="tba">creator</a><br><br>
                       </div>
                       <div style="margin-left:15px;width:170px;height:130px;overflow:auto;text-align:justify;">
                           <font size="3">SKIN NAME IS A LIGHT/DARK SKIN WITH AMAZING GRAPHICS AND WELL DESIGNED LAYOUTS AND FEELS!
                           </font>
                       </div>
                </div>
               </div>
</div>

There's an erroneous 's' in the div class name..

<div class="otms" style="height:200px; width:200px;">

[Todge]

Sept 14, 2013 15:26:07 GMT -8 Wormopolis said:

hey Todge, I wrote this for a V4 forum a while back if it takes it off your plate...


<center>
<script type="text/javascript">

// OTM boxes // by Wormopolis - www.wormocodes.com // keep heder intact - do not repost

var OTMboxWidth="200"; var OTMboxHeight="134"; //these 2 dimensions must match your cover image. make all cover images the same dimensions

var OTMarray=[
["Member of the Month","http://i197./aa250/WORMOPOLIS/OTMcupcake.jpg","this is a bunch of text. this is a bunch of text. this is a bunch of text. this is a bunch of text. this is a bunch of text. this is a bunch of text. this is a bunch of text. this is a bunch of text. this is a bunch of text. this is a bunch of text. this is a bunch of text. this is a bunch of text. this is a bunch of text. this is a bunch of text. this is a bunch of text. this is a bunch of text. "],
["Thread of the Month","http://i197./aa250/WORMOPOLIS/OTMcupcake.jpg","this is a bunch of text. this is a bunch of text. this is a bunch of text. this is a bunch of text. this is a bunch of text. this is a bunch of text. this is a bunch of text. this is a bunch of text. this is a bunch of text. this is a bunch of text. this is a bunch of text. this is a bunch of text. this is a bunch of text. this is a bunch of text. this is a bunch of text. this is a bunch of text. "],
["Male of the Month","http://i197./aa250/WORMOPOLIS/OTMcupcake.jpg","this is a bunch of text. this is a bunch of text. this is a bunch of text. this is a bunch of text. this is a bunch of text. this is a bunch of text. this is a bunch of text. this is a bunch of text. this is a bunch of text. this is a bunch of text. this is a bunch of text. this is a bunch of text. this is a bunch of text. this is a bunch of text. this is a bunch of text. this is a bunch of text. "],
["Female of the Month","http://i197./aa250/WORMOPOLIS/OTMcupcake.jpg","this is a bunch of text. this is a bunch of text. this is a bunch of text. this is a bunch of text. this is a bunch of text. this is a bunch of text. this is a bunch of text. this is a bunch of text. this is a bunch of text. this is a bunch of text. this is a bunch of text. this is a bunch of text. this is a bunch of text. this is a bunch of text. this is a bunch of text. this is a bunch of text. "] //no comma last one
];
//[title, cover image url, text for the hidden scrollbox]
//no need to edit below
document.write('<div id="OTMcontainer"></div>'); var temphold="<center>"; function handleReshow(e) { if (!e) var e = window.event; var tg = (window.event) ? e.srcElement : e.target; var reltg = (e.relatedTarget) ? e.relatedTarget : e.toElement; if (reltg.id.match(/scroll/) || (tg.nodeName.match(/img/i) && tg.parentNode.style.letterSpacing!='')) return; if (tg.nodeName.match(/img/i)) tg=tg.parentNode.previousSibling; tg.nextSibling.style.letterSpacing=''; tg.nextSibling.style.visibility='visible'; tg.nextSibling.style.opacity='100'; var tm2=setTimeout("document.getElementById('" + tg.nextSibling.id + "').style.letterSpacing='';",2000); } for (od=0; od<OTMarray.length; od++) { temphold+='<div id="OTMlabel' + od + '" class="OTMlabel">' + OTMarray[od][0]+ '</div><div id="OTMinner'+od+'" style="padding: 2px; width:' + OTMboxWidth+ 'px; height:' + OTMboxHeight+ 'px; " onmouseout="handleReshow(event);"><div id="OTMscroll'+od+'" style="width:' + OTMboxWidth+ 'px; height:' + OTMboxHeight+ 'px; overflow-y:auto; position:absolute;" >' + OTMarray[od][2] + '</div><div class="OTMdiv" id="OTMcover'+od+'" width="' + OTMboxWidth+ 'px" height="' + OTMboxHeight+ 'px" style="position: absolute;" onmouseover="this.style.visibility=\'hidden\'; this.style.opacity=\'0\'; var tm=setTimeout(function() {document.getElementById(\'OTMcover' + od + '\').style.letterSpacing=\'1\';},2000);"><img src="' + OTMarray[od][1]+ '" ></div></div><br>'; } document.getElementById('OTMcontainer').innerHTML=temphold+"</center>";

</script>


<style type="text/css">
.OTMdiv
{
transition:visibility 2s, opacity 2s;
-moz-transition: visibility 2s, opacity 2s; /* Firefox 4 */
-webkit-transition:visibility 2s, opacity 2s; /* Safari and Chrome */
-o-transition:visibility 2s, opacity 2s; /* Opera */
}
.OTMlabel
{
font-size:18;
font-weight: bold;
}
</style>

</center>


Very clever, reversing the process to use a covering image and making that disappear instead.

That may not be possible this time, as TB is wanting the background image to bleed outside the disappearing <div>, but I'll look into it further if we still have problems this way.

Thank you

[Alanna 🥀🖤]

Sept 15, 2013 5:12:30 GMT -8 Todge said:

Sept 14, 2013 10:40:58 GMT -8 @khristian said:

Hrm, didn't seem to do the trick:
<div style="background-image: url(http://imageshack.us/a/img15/296/9d5y.png); height: 225px; width: 225px; border:10px solid black;float:left;margin-right:15px;margin-bottom:30px;">
               <div class="otms" style="height:200px; width:200px;">    
                <div style="margin-top:13px; margin-left:13px; height: 200px; width: 200px; background-color: #fff; line-height:12px;">
<BR>
                       <div style="text-align:center;"><font size="5"><i><b>BEST SITE SKIN</b></i></font><br>
                       <a href="tba">skin name</a> // <a href="tba">creator</a><br><br>
                       </div>
                       <div style="margin-left:15px;width:170px;height:130px;overflow:auto;text-align:justify;">
                           <font size="3">SKIN NAME IS A LIGHT/DARK SKIN WITH AMAZING GRAPHICS AND WELL DESIGNED LAYOUTS AND FEELS!
                           </font>
                       </div>
                </div>
               </div>
</div>

There's an erroneous 's' in the div class name..

<div class="otms" style="height:200px; width:200px;">

Well, that is my class name:

/* OTMS */
.otms{
   width:225px;
   height:225px;
   opacity:0;
   -webkit-transition-duration:1s;
   transition-duration:1s;
   -moz-transition-duration:1s;
}
.otms:hover{
   width:225px;
   height:225px;
   opacity:1;
}

[Todge]

Ahh.. Sorry. Because in a previous post you said you were using the class otm, I assumed you still were..

Using your current styling and code, everything works fine for me (again) on my test forum

[Alanna 🥀🖤]

Hrm... that is extremely odd and very frustrating...

Todge, where are you placing the style css for the otms?

[Todge]

The styling is directly above <div> it's targeting, but it shouldn't matter where it is, so long as it's not inside the <div>..

Do you have any other CSS on your forum that shares the same classname?

[Alanna 🥀🖤]

Nope, I am only using "otms" class name for this.

[Todge]

What about any styling given to div tags?