0

Would just like to ask what could possibly go wrong, I'm using wordpress and modified the theme css few years ago, I havent check the site for years and upon looking the hover for each element of circle was staying on hover effect even if it is not hovered. On its normal view, the inner circle which is dark gray together with the post title should not be visble until it is hovered please see the image:

enter image description here

Any thoughts? the site is -- --

Thanks

Dek Dek
  • 101
  • 1
  • 2
  • 10
  • 1
    Yeah, those of us helping from our workplaces probably aren't going there to look. Show the php rendered HTML, the relevant CSS and any relevant JavaScript, if any is involved. What we need is code, not a link to a live site that will cease to demonstrate the problem once it's solved. When deciding what code to show, what we need is a [Minimum, Complete, Tested and Readable example](http://stackoverflow.com/help/mcve). Also a live demo, at [JS Fiddle](http://jsfiddle.net/), or similar, can be helpful for those that want to help you. – David Thomas Feb 04 '14 at 00:42
  • Use a CSS Debugger like Developer Tools (F-12) in Chrome or Firebug For Firefox (free download) to inspect your elements. Please include the releavant rednered code in your question and see if you can replicate your problem in a more work-friendly environment like jsfiddle.net or http://codepen.io/ – Jon P Feb 04 '14 at 00:46
  • thanks I'm pretty new on codepen.io and something similar, but this is what it should look like upon none hover without the title: http://codepen.io/anon/pen/xEfwj – Dek Dek Feb 04 '14 at 01:10
  • got the solution by following guidelines from below comment of carol `div.caption.boxcaption{} div.caption.boxcaption:hover{}` – Dek Dek Feb 04 '14 at 02:22

1 Answers1

1

the h3 in the a tag has colour values

div.caption.boxcaption a.view h3 { color:Transparent; }

 div.caption.boxcaption a.view:hover h3 { color:White; }

You need to position the background blocking image on the a.view instead of the div.boxcaption changing its position to off screen on a.view:hover

div.boxcaption {
   background: url("images/circle_caption.png") no-repeat scroll center top rgba(0, 0, 0, 0);
height: 112px;
left: 0;
margin-left: 21px;
padding: 65px 10px;
position: absolute;
text-align: center;
top: 21px;
width: 210px;
z-index: 1000;
}
Carol McKay
  • 2,438
  • 1
  • 15
  • 15
  • 1
    Thanks Carol for pointing the main problem, I got it working by adding `div.caption.boxcaption{}` `div.caption.boxcaption:hover{}` this rules made the solution and it is now working well thanks! – Dek Dek Feb 04 '14 at 02:19