Image Hover over Scroll Box

[Tumbleweed]

Jun 2, 2016 20:37:47 GMT -8 Gking said:

Tumbleweed you are on the roll

^^Well, I just rolled off into a little bit of the frustrated area, but thanks.

Lik, I started on this about a half hour/45 minutes ago and got frustrated trying to make the content come from the middle and expand all directions. The best I can do for you is coming from the side and expanding. I have it on this test site.....  proboardcolors.proboards.com/page/testing-hovers   .... but I made your image a bit bigger because trying to get text on it and have it readable is a bit challenging. I just want to know if you want to keep bumping this so someone else could try or if what I did is o.k. (No hard feelings if you don't want to use it.) I just don't want to mess with the smaller image unless I know this will work for you.

[Lik]

Jun 2, 2016 21:51:34 GMT -8 Tumbleweed said:

Jun 2, 2016 20:37:47 GMT -8 Gking said:

Tumbleweed you are on the roll

^^Well, I just rolled off into a little bit of the frustrated area, but thanks.

Lik , I started on this about a half hour/45 minutes ago and got frustrated trying to make the content come from the middle and expand all directions. The best I can do for you is coming from the side and expanding. I have it on this test site.....  proboardcolors.proboards.com/page/testing-hovers   .... but I made your image a bit bigger because trying to get text on it and have it readable is a bit challenging. I just want to know if you want to keep bumping this so someone else could try or if what I did is o.k. (No hard feelings if you don't want to use it.) I just don't want to mess with the smaller image unless I know this will work for you.

I can mess around with it! I like it, but is there a way you could center the words in the middle? If I can't seem to get it to work out, I can use what I have now as it's not that bad of a look. what i have now

[Tumbleweed]

Jun 3, 2016 6:21:43 GMT -8 Lik said:

Jun 2, 2016 21:51:34 GMT -8 Tumbleweed said:

^^Well, I just rolled off into a little bit of the frustrated area, but thanks.

Lik , I started on this about a half hour/45 minutes ago and got frustrated trying to make the content come from the middle and expand all directions. The best I can do for you is coming from the side and expanding. I have it on this test site.....  proboardcolors.proboards.com/page/testing-hovers   .... but I made your image a bit bigger because trying to get text on it and have it readable is a bit challenging. I just want to know if you want to keep bumping this so someone else could try or if what I did is o.k. (No hard feelings if you don't want to use it.) I just don't want to mess with the smaller image unless I know this will work for you.

I can mess around with it! I like it, but is there a way you could center the words in the middle? If I can't seem to get it to work out, I can use what I have now as it's not that bad of a look. what i have now

What you already have is nice. But if you want to fiddle with this here is the bare bones css and html: (I vertically and horizontally centered the names)


<style>
/*this is the hover transition and positioning css*/
#overlay {
position:relative;
top:-153px;
width:0px;
height:0px;
font-size:0px;
background-color:#666688;
opacity:0.3;
-webkit-transition: opacity .25s ease;
-moz-transition: opacity .25s ease;
-webkit-transition: width 1s, height .5s, margin 1s;
-moz-transition: width 1s, height .5s, margin 1s;
-ms-transition: width 1s, height .5s, margin 1s;
transition: width 1s, height .5s, margin 1s;
overflow:hidden;
}
/*this styles your hover box*/
#box:hover #overlay {
width:142px;
height:142px;
font-size:12px;
padding:4px;
text-align:center;display:table-cell;vertical-align:middle;
opacity:0.8;
}
</style>

<div id="box"><img style="width:150px;height:150px;" src="https://i.gyazo.com/fc9fb97735482eab0410f12ad75f1de3.png">
<div id="overlay">
<span style="color:#ffff00;">Tumbleweed</span><br>
<span style="color:#00ffff;">Administrator</span>      
</div>
</div>

<div id="box"><img src="http://placehold.it/150x150">
<div id="overlay">
<span style="color:#ffff00;">other name</span><br>
<span style="color:#ff0000;">Administrator</span>      
</div>
</div>



[Lik]

I'll take a peak, and mess around with it and see how it'll turn out. Thank you! Tumbleweed