• 0

Better iBox hover effect


Question

Posted (edited) · Report post

Hi guys, I know you're probably really busy with DMS2, but I'm looking for a little help with CSS customisation.

 

I'm using Better iBoxes on the home page. Right now, if you roll over the text, it shows up, but not if you just roll over the images. I want to turn the whole box into a hover button, but can't figure out how. A. Hansson said he can't help, so I was wondering if you might have any thoughts.

 

To get the hover from white to black for the text I used this: 

.better_iboxes .better_iboxes_text h4 {
color: #fff;}
.box-headers h4:hover { color:#000; }

and put .box-headers in the custom class.

 

Home page is here: http://dev.transitionbydesign.org

 

Many thanks.

Edited by microsqueek

Share this post


Link to post
Share on other sites

6 answers to this question

  • 0

Posted · Report post

So can you just confirm you want a an image with text underneath and whole thing is a button? 

 

iboxes and Better iboxes might not be needed for this. 

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Sure. So, I need each iBox (or button, or whatever) to have a hover effect - by themselves, just icons, when you roll over them, the text appears. Each one links to a different page.

 

I was using iBox for the control it offers (size, location, etc). If you have other suggestions, totally open! But it's the hover thing that really seems to be a stumbling block.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

I see you are using DMS 1.1.8. Are you considering upgrading to DMS2? i highly recommend it. It is included as you have a years subscription to DMS so you get DMS2

 

You can do this with adjacent class selectors in CSS - just going to find you a link to a tutorial that should solve this. 

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Actually there is a much easier way 

 

Use 5 columns of 2 span width each with text boxes in each one, give the first textbox a custom class of your choosing. remember to make it totally unique - for this example i've called it 'divover'

 

in the body of the text box open a link with <a> and give the link the url,  then add in the HTML for the image and then the text wrapped in <p></p>

 

Give a unique class to the text (ive used linkytext)

 

so you now have

 

<a href="http://google.com"><img src="url="YOURIMAGE.JPG" width="100px"><p class="linktext">Link text</p></a>

 
and the CSS you need is 
 
.divover:hover .linktext
{
opacity:1;
}

.divover .linktext
{
opacity:0;
}

 

2 people like this

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Well, that's an interesting alternative. Works well, too. Thanks!

1 person likes this

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

no problem. glad that worked :) 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now