davej Posted January 2, 2014 Share Posted January 2, 2014 I received a PM from MSousa asking about this approach.... To me it seems a bit strange and I would be interested in other opinions. <!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title>hover title</title><style>#over{width:200px;}#over ~ h3.title{display:none;background-color:white;padding:0 5px;border-radius:3px;position: relative;top:-10px;left:-240px;}#over:hover{width:400px;}#over:hover ~ h3.title{display:inline;}</style></head><body><img id="over" src="http://www.stlnetwork.net/test/img/wt_c.jpg" onMouseOver="this.src='http://www.stlnetwork.net/test/img/wt_t.jpg'" onMouseOut="this.src='http://www.stlnetwork.net/test/img/wt_c.jpg'" /><h3 class="title">text title</h3><p>This seems like a goofy approach</p><div id="out1"></div></body> </html> Link to comment Share on other sites More sharing options...
dsonesuk Posted January 2, 2014 Share Posted January 2, 2014 <!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8"> <title>hover title</title> <style> .title {display:inline-block; position:relative; margin:0;} .title:first-child img {width:200px;} .title:first-child img + img{display:none;} .title:hover:first-child img {display:none;} .title:hover:first-child img + img {display:block;width:400px;} .title span{text-align: center; position: absolute; bottom:0.5em; display: none; left: 0; right:0;} .title span b {background-color:white; padding:0 5px; border-radius:3px;} .title:hover span{display: block;} </style> </head> <body> <h3 class="title"><img src="http://www.stlnetwork.net/test/img/wt_c.jpg" alt=""><img src="http://www.stlnetwork.net/test/img/wt_t.jpg" alt=""><span><b>text title</b></span></h3> <p>This seems like a better approach</p> <div id="out1"> </div> </body></html> Link to comment Share on other sites More sharing options...
davej Posted January 2, 2014 Author Share Posted January 2, 2014 Ah yes, that seems much less crazy. Thanks! Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now