- This topic is empty.
-
AuthorPosts
-
August 10, 2010 at 3:13 pm #29881DeathStarDarthMember
hello all,
I’m trying to convert the ul based layout here:
http://www.sohtanaka.com/web-design/popout-details-on-hover-w-css/to a div based layout for my WP site.
here’s the html i have to work with:
Code:header stuff here
excerpt here
and the css, i have so far:
Code:.post-container { width: 300px; float: left; margin: 10px; }article.post { width: 300px; float: left; margin: 10px; position: relative; }
article.post:hover { z-index: 99; }
.wp-post-image { border: 1px solid #333; position: relative; filter: alpha(opacity=30); opacity: 0.3; -ms-filter:”progid:DXImageTransform.Microsoft.Alpha(Opacity=30)”; /*–IE8 Specific–*/ }
.wp-post-image:hover { z-index: 999; filter: alpha(opacity=100); opacity: 1; -ms-filter: “progid:DXImageTransform.Microsoft.Alpha(Opacity=100)”; }
section.info { position: absolute; left: -10px; top: -10px; padding: 310px 10px 10px; width: 320px; display: none; background: #fff; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; }
section.info:hover { display: block; }
i think i almost have it. but, for some reason, it’s not working. i can post an example, it that’ll make it clearer.
thanks for the help.
cheers,
D.
August 10, 2010 at 6:52 pm #81308virtualParticipantWhy would you want to change something that a great designer like Soh Tanaka has made and probably refined?
August 10, 2010 at 7:18 pm #81317DeathStarDarthMembersorting my wordpress posts that way, won’t work very well for me. but the way i have my posts showing, on my front page, would work very well with a similar layout.
on a side note, i just saw that there’s an ‘add foe’ button on here. nice.
cheers,
D
August 10, 2010 at 7:45 pm #81319virtualParticipantOh so I guess I have made an enemy!
August 10, 2010 at 8:01 pm #81321DeathStarDarthMembernah. i try not to collect too many enemies.
but, let’s see if i have this right.
ul.columns = #post-container
ul.columns li = .post
ul.columns li:hover = .post:hoverul.columns li img = .post.wp-post-image
ul.columns li:hover img = .post.wp-post-image:hoverul.columns li .info = .post.info
ul.columns li:hover .info = ? ( i think this is where my problem is )Anyone with any ideas?
August 10, 2010 at 10:08 pm #81325virtualParticipantThe logical sequence to your question would be .post .info:hover but looking at your earlier code it could be post-container .post .info:hover. But I’m no great shakes with WordPress.
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.