Hover/Slide board image board mod - need help!

[Pheobe Black]

orderofmerlintester.proboards.com



Okay, so we got the idea to make the board images slide across to reveal the board description. While looking around on another resource site (it's no longer active sadly, just closed down), I found something that was basically what we had come up with the idea for. -- postimg.cc/gnycDKms



I messaged the person that had made the post with that image in it, but she never got back to me on how she did it before the site closed down. I was able to make it work in code pen, but when I put the coding into the skin, it wasn't lining up.  -- codepen.io/queenharpie89/pen/dggdVg -- Code pen coding





CSS Code

#slide{
position: absolute;
left: 377px;
height: 300px;
transition: left 0.4s ease-in-out;
-o-transition: left 0.4s ease-in-out;
-ms-transition: left 0.4s ease-in-out;
-moz-transition: left 0.4s ease-in-out;
-webkit-transition: left 0.4s ease-in-out;
}


#toggle{
position: relative;
left: 200px;
padding-left:211px;
}


.box {
border: 5px solid #00f;
background:url(https://img00.deviantart.net/1cc2/i/2018/301/7/a/fat_lady_test_by_theorderofmerlin-dcqkq86.png);
height:300px;
width:250px;
border-radius:50% 50% 0px 0px;
}


#slide:hover{
left: 100px;
}


.oval {
height: 300px;
width: 250px;
border-radius: 50% 50% 0px 0px;
border: 5px solid #f00;
}

.info{
height:175px;
width:175px;
margin-top:125px;
margin-left:10px;
background:rgba(255, 255, 255, .5);
}

.board-title{
color:gold;
font-size:20px;
font-weight:bold;
text-decoration:underline;
text-align:center;
line-height:50px;
}

.post-thread{
text-align:center;
line-height:30px;
}

.latest{
width:245px;
font-size:15px;
text-align:center;
}



HTML Code (what's in the board list mess atm. I know the variables aren't all in it yet, that's the next step after I get this thing to play nice with me)



<div style="margin-left:40px;">
<table width="490px">
<tr>
<td>
<div class="board-title">Board title would go here</div>

<div class="post-thread">$[board.threads]<img style="vertical-align:middle" src="https://img00.deviantart.net/8879/i/2016/305/b/5/gryffindor_by_theorderofmerlin-dan0k6p.png">$[board.posts]</div>
<div class="latest">$[board.last_thread]</div>
</td>
<td>
<div style="width:245px;">
<div id="slide">
<div id="toggle">
<img src="https://img00.deviantart.net/7876/i/2018/301/c/b/gryffindor_test_by_theorderofmerlin-dcqkqv2.png" class="oval">
</div>
</div>
<div class="box">
<div class="info">Board Description would go here.</div>
</div></div>
</td>
</tr>
</table>
</div>



If anyone can figure this out and make it play nice with me, I'll love you forever!!! I really want to make this work for the different skins we're working on. I really kind of want it to slide over the board info stuff, so that way I can keep the hover area from overlapping each other. I've basically cussed this thing out till I'm blue in the face. Usually, skins and codes I work on get cussed at a lot, but this thing has broken a record for my frustration at it. So I figured I'd ask and see if anyone here can make this behave the way it should for me.

[JD]

Hey there!

I'm pretty sure I can fix this but it's really hard to read your code when it's all stretched out like that. Also, your link sends me to a site where there are no boards visible so I can't see the code in action.

If you can make a board visible so I can see, I can look at the source code on your site.

But as an initial idea here...

I would place your board image directly below (in the same table cell as your description) and then set your description to position:absolute; The icon will automatically jump up to lay atop your description. I would them simply set your icon to icon:hover { margin-right: MINUS however much you want it to move to the right - probably the width of your icon; }

Like I said - can't really check the coding that well, but in theory this is what I would do

[Pheobe Black]

JD -- Sorry for the coding being spaced like that, I have ZERO ideas how it got that way because even I can't read it like that.

The site should be showing the first boards, but I'll try what you recommend when I'm not on my tablet and phone. It's basically our tester for doing exactly this, so we don't break the entire forum (wouldn't be the first time). But I'll definitely give that a try when I get a minute. This is just something we've wanted to do, and it's not playing nicely with us at all hahahaha

[JD]

Pheobe Black

Any luck? <3

[Pheobe Black]

a little! -- orderofmerlintester.proboards.com/

it's just a trick now of getting the hover image to stay put in one spot so we can scroll on board descriptions hahaha. but it's definitely working properly again! so thanks for that!! wouldn't have figured it out without your help! we've been fighting with it for months hahahaha

[JD]

I can't see any boards so I can't help you further atm but I'm pretty sure I can help with that keeping the image in place <3 Just make sure the hover for your board description has the same hover effect as your icon hover then it doesn't matter if the mouse is over the icon or over the description beneath - the icon will still move to the side <3