Jump to content

Archived

This topic is now archived and is closed to further replies.

microsqueek

Better iBox hover effect

Recommended Posts

microsqueek    5
microsqueek

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.

Share this post


Link to post
Share on other sites
greenfly    230
greenfly

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. 


The answer to many issues can be found by searching in the forum before posting as someone else  may very well have had the same problem before you have.  Also, reading the documentation can help you gain a good understanding of how everything works. 

 

Please do not send me private messages. Occam's razor - The principle states "Keep things simple!"

Share this post


Link to post
Share on other sites
microsqueek    5
microsqueek

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
greenfly    230
greenfly

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. 


The answer to many issues can be found by searching in the forum before posting as someone else  may very well have had the same problem before you have.  Also, reading the documentation can help you gain a good understanding of how everything works. 

 

Please do not send me private messages. Occam's razor - The principle states "Keep things simple!"

Share this post


Link to post
Share on other sites
greenfly    230
greenfly

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

 

  • Like 2

The answer to many issues can be found by searching in the forum before posting as someone else  may very well have had the same problem before you have.  Also, reading the documentation can help you gain a good understanding of how everything works. 

 

Please do not send me private messages. Occam's razor - The principle states "Keep things simple!"

Share this post


Link to post
Share on other sites
microsqueek    5
microsqueek

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

  • Like 1

Share this post


Link to post
Share on other sites
greenfly    230
greenfly

no problem. glad that worked :) 


The answer to many issues can be found by searching in the forum before posting as someone else  may very well have had the same problem before you have.  Also, reading the documentation can help you gain a good understanding of how everything works. 

 

Please do not send me private messages. Occam's razor - The principle states "Keep things simple!"

Share this post


Link to post
Share on other sites

  • Similar Content

    • tkpagelines
      By tkpagelines+
      Hi there ,
      i would like to change the color of menu items on hover and the current menu item. Both should have the same color, but not the color given of the theme scheme.
      Any suggestions ? Maybe a css snippet ?
       
      Thanks
    • DanatTLFN
      By DanatTLFN
      Site URL: http://thelocalfilmnetwork.com
      Host: GoDaddy
      Hi Pagelines team and community,
       
      I am going to be attempting to do a full migration from GoDaddy to WPEngine. 
      I need to know, will I lose the front-end customisations I have made?
      Also are there any backups or things I need to do to ensure that I do not lose any important info relating to the site?
      Kind regards,
      Dan
       
    • DanatTLFN
      By DanatTLFN
      Hi Pagelines Team,
      I am interested in setting up a bbPress forum on my website.
      Unfortunately, I have never set up a child theme for my site and have been just using the drag and drop system to put together my site on the main theme. If I am to install the child theme, and activate it, what do I stand to lose in terms of design and current configuration settings on the backend?
      Thank you for taking this time to read this.
      Kind regards,
      Dan
    • mistrmint
      By mistrmint+
      Site : http://fireworxmedia.yourdemosite.co.za/
      I need to change the second menu items on hover to different colors.
      i.e factual needs to be blue on hover, fiction red on hover, etc. etc.
      then on the sub menu of factual, all need to hover blue with the main menu factual item staying as blue,
      and the sub menu of fiction needs to hover red with fiction item staying as red.
      etc. etc.
       
      For the life of me I cannot figure it out.
    • micstepl
      By micstepl+
      Feature request / state of the art idea
      Could you add to any Extension
      where there is an "Image" available  (eg. box Image, Image, etc.) and a "link" ist added >>> a HOVER funktionality <<<< This allows than the user to
      add an image (taking the same properes from the original / no changes allowed) advanced you could add a "transition"  and/or  "opacy"
×