Jump to content


Photo
- - - - -

Better iBox hover effect

better ibox hover customisation

  • Please log in to reply
6 replies to this topic

#1 microsqueek

microsqueek

    Advanced Member

  • Members

  • 32 posts
  • Country: Country Flag

Posted 10 April 2014 - 01:24 PM

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, 10 April 2014 - 01:24 PM.


#2 greenfly

greenfly

    Advocate

  • Members

  • 3268 posts
  • LocationManchester, England
  • Framework Version:latest
  • Country: Country Flag

Posted 10 April 2014 - 08:28 PM

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. 



#3 microsqueek

microsqueek

    Advanced Member

  • Members

  • 32 posts
  • Country: Country Flag

Posted 10 April 2014 - 08:43 PM

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.



#4 greenfly

greenfly

    Advocate

  • Members

  • 3268 posts
  • LocationManchester, England
  • Framework Version:latest
  • Country: Country Flag

Posted 11 April 2014 - 12:06 AM

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. 



#5 greenfly

greenfly

    Advocate

  • Members

  • 3268 posts
  • LocationManchester, England
  • Framework Version:latest
  • Country: Country Flag

Posted 11 April 2014 - 12:36 AM

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;
}

 


  • GetMeWebDesign and microsqueek like this

#6 microsqueek

microsqueek

    Advanced Member

  • Members

  • 32 posts
  • Country: Country Flag

Posted 11 April 2014 - 03:36 PM

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


  • greenfly likes this

#7 greenfly

greenfly

    Advocate

  • Members

  • 3268 posts
  • LocationManchester, England
  • Framework Version:latest
  • Country: Country Flag

Posted 11 April 2014 - 07:12 PM

no problem. glad that worked :) 







Also tagged with one or more of these keywords: better ibox, hover, customisation