• 0

Css help


Question

I'm building a wordpress blog and right now on the main page i got the posts picture and on every picture there's a black block hlaf transparent with the post title on it.

What i want to accomplish is that when i hover the post img the black block and the h1 txt appears. I'm new to css and what i couldn't understand is how can i code in css something like

If hover over .post-img show .image .text.

I've read about Conditional-CSS but couldn't find an answer. I've attached the pieces of code i thought relevant for my issue.

Thanks

index.php:

<div class="image">
  <div class="text">
    <p><h1><a href="<?php the_permalink(); ?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a></h1>
</p>
  </div>
</div>

style.css:

.image{
	position:relative;
	float:left; /* optional */
	}
.image .text {
	background-color:black;
	filter: alpha(opacity=50);
	opacity:0.5;
	position:absolute;
	top:145px; /* in conjunction with left property, decides the text position */
	left:0px;
	width:309px; /* optional, though better have one */
	height: 52px;

}

.post-img {
	padding: 5px;
	clear: both;
	width: auto;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 5px;
	margin-left: 0px;
	background-color: #E6E6E6;
	height: 181px;
	text-align: center;
	border: 1px solid #D5D5D5;
	overflow: hidden;
}
.post-meta h1 a {
	margin-right: 13px;
	margin-top: -5px;
	color: #FFFFFF;
	text-decoration: none;
	font-weight: bold;
	display: block;
}

Link to comment
Share on other sites

15 answers to this question

Recommended Posts

  • 0

If I have this correct, couldn't you just use the CSS ':hover' attribute to do what you are after? Something very basic is below:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Example Document</title>
<style type="text/css">
<!--
#example {
    background-color:#000000;
}
#example:hover {
    background-color:#FF0000;
}
-->
</style>
</head>

<body>
<div id="example"><h1>Example Text</h1></div>
</body>
</html>

It's so basic I would of thought that you have already tried it. The only thing I cannot think of is how you would replace an image with text using CSS (if this is what you are after), I presume you would have to use some sort of JavaScript which would swap out one DIV for the hovered one?

Link to comment
Share on other sites

  • 0

That's not what i'm after.

I want to know how can i triger

#example:hover

When my mouse is over

#example-9

when i'm hovering an image i want the text to change.

Here's a good example of what i'm trying to do: http://allancole.com/themes/

I'm trying to do it with css with :hover but mu problem is that if i want the text to show i need to mouse over the text.

I don't know how to trigger the h1:over when i'm mouseovering the image.

Link to comment
Share on other sites

  • 0

Well you will have to define the hover pseudo class for the parent. Here is how I would do it.

The html...

<div class="post">
	<div class="text">
		<h2>This is post title.</h2>
		<p>This is some description.</p>
	</div>
	<img src="images/img_post_01.jpg" width="130" height="130" alt="Post Image" />
</div>

The css...

div.post    {
    position: relative;
}
div.post img    {
    display: block;
}
div.post div.info    {
    left: 0;
    bottom: 0;
    width: 600px; /* Same as width of parent */
    position: absolute;
    margin-left: -600px; /* Same as width of parent */
}
div.post:hover div.info    {
    margin-left: 0;
}

Link to comment
Share on other sites

  • 0

You sure your second div is text and not info?

I tried your code but the title is visibile and in IE you need to be on the link to see the box, in FF and Chrome just hovering the pic triggers it.

I've managed to get a better result with the code i wrote but it's still looks bad in IE

<div class="image">
  <div class="text">
    <p><h1><a href="<?php the_permalink(); ?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a></h1>
</p>
  </div>
</div>

.image{
    position:relative;
    float:left; /* optional */

    }
.image .text {

    position:absolute;
    top:0px; /* in conjunction with left property, decides the text position */
    left:0px;
    width:309px; /* optional, though better have one */
    height: 199px;
}

.image .text h1 a {
        color: rgba(0,255,255,0);
}
.image .text:hover a{

    position:absolute;
    top:145px; /* in conjunction with left property, decides the text position */
    left:0px;
    width:309px; /* optional, though better have one */
    height: 52px;
    color: black;
    background-image: url(images/bg.jpg);
}

In IE on the top of the pic there's the post title and you need to touch it with the mouse to see the bottom title with the background pic. In ff and Chrome it works just great.

Any idea what's the problem?

Link to comment
Share on other sites

  • 0

Ooops the second div in css is supposed to be text and not info. I did not know there was a link involved in the equation. Besides you can not nest h1 inside a p element as the nesting rules do not allow that. The following code is tested and it works as required.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <title></title>
  <style type="text/css">

*    {
    margin: 0;
    padding: 0;
}
div.image    {
    width: 350px;
    position: relative;
}
div.image img    {
    display: block;
}
div.image div.info    {
    left: 0;
    bottom: 0;
    z-index: 1;
    width: 350px; /* Same as width of parent */
    position: absolute;
    margin-left: -700px; /* More than width of parent */
}
div.image:hover div.info    {
    margin-left: 0;
}
div.image a.link, div.image a.link:visited    {
    z-index: 2;
    height: 220px; /* Same as height of image */
    display: block;
    margin-top: -220px; /* Same as height of image */
    position: relative;
    background: url(images/blank.gif) repeat 0px 0px;
}

  </style>
</head>

<body>

<div class="image">
    <div class="info">
        <h2>This is post title.</h2>
        <p>This is some description.</p>
    </div>
    <img src="images/img_map_01.jpg" width="350" height="220" alt="" />
    <a class="link" href="#" title=""></a>
</div>

</body>
</html>

Link to comment
Share on other sites

  • 0

thanks for your help sweetsam!

The code you gave me, in wordpress any way, got the page to be wider x3 then it use to, i believe its because you used margin to hide the Title.

I took bits and pieces from your code and this is what i got so far combined with mine. Got some glitches there but i'll get to it in a sec.

.image{
    position:relative;
    float:left; /* optional */

    }
.image .text {
    background-image: url(images/trick.gif); /* transparent gif */
    filter: alpha(opacity=0);
    position:absolute;
    top:0px; 
    left:0px;    
    width:309px; 
    height: 199px;
}

.image .text h1 a {
        color: rgba(0,255,255,0);            
}

.image .text:hover a{
    text-align:center;
    position:absolute;
    top:155px;
    left:0px;
    width:309px; 
    height: 52px;
    color: black;
    background-color:white;
    filter: alpha(opacity=50);
    opacity:0.5;
    /*background-image: url(images/bg.jpg);*/
}

<div class="image">
  <div class="text">
    <h1><a href="<?php the_permalink(); ?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a></h1>
  </div>
</div>

This code works perfect for me in all browsers, when i move on a pic i see the transparent white block with black title on it but i got 3 problems i wasn't able to fix.

1. the text is also half transparent as the background, i couldn't find a way to make it opacity:1; with a transparent background.

2. most annoying problem, the text is way to up on the background. If i use stuff like margin it moves the background too, there's no separation between the background and the text

3. the image is no longer clickable, i can only click the title when its showed.

It think that 1+2 are the same problem, when i'll find a way to separate the text from the background they will be fixed.

Thanks

Link to comment
Share on other sites

  • 0

1. This is how opacity works. It changes the opacity of the entire element, including all of it's children.

If you would like a semi-transparent background you will either need to use the CSS3 rgba as the background colour or a png background image.

div.text {
  background: #fff; /* Non CSS3 browsers will get a white background */
  background: rgba(255,255,255,0.5); /* CSS3 browsers will get a 50% white background */
}

2. Use padding to push in the text. You will need to decrease it's width to accommodate the new padding, as the padding adds to the element's width. So 309px element plus 10px padding results in a 329px wide element.

3. The A (link) is only inside the h1. To make the entire image clickable you would have to put the link inside the image div, set it to be display: block and the same height as your image.

Link to comment
Share on other sites

  • 0

I understand what you are trying to achieve for the most part. I am not clear about how you want the link to work. Do you want the entire box holding the picture to function as a link or just the text ? Do you want the ability to highlight text using the mouse ?

Link to comment
Share on other sites

  • 0

sweetsam - the entire box, i don't care about highlighting

Baines - your solutions worked except the linking part

I tried doing something like

<div class="image">
<a href="<?php the_permalink(); ?>" </a>
  <div class="text">
   <h1><a href="<?php the_permalink(); ?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a></h1>
  </div>
</div>

But the image is still not clickable

Link to comment
Share on other sites

  • 0

In that case this should work.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <title></title>
  <style type="text/css">

*	{
	margin: 0;
	padding: 0;
}
div.image	{
	width: 350px;
	position: relative;
}
div.image img	{
	display: block;
}
div.image h1	{
	left: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	overflow: hidden; /* Prevents widening of layout */
	position: absolute;
}
div.image h1 br	{
	display: none;
}
div.image:hover h1 br	{
	display: inline;
}
div.image a, div.image a:visited	{
	height: 220px; /* Overall height should be the same as the height of the image for the entire image to act as a link */
	display: block;
	text-indent: -9000px;
	padding: 0; /* Set padding as required */
}
div.image:hover a, div.image:hover a:visited	{
	text-indent: 0;
	background: url(images/bg_link.png) repeat 0px 0px; /* could use rgba for translucent color but won't work in IE8 and lower */
}

  </style>
</head>

<body>

<div class="image">
	<h1><a href="#" title="">This is post title.</a></h1>
	<img src="images/img_map_01.jpg" width="350" height="220" alt="" />
</div>

</body>
</html>

Link to comment
Share on other sites

  • 0

sweetsam i'm sorry, i couldn't get your code to work properly :(

When i do something like that:

.image .text {

background-image: url(images/trick.gif);

filter: alpha(opacity=0);

position:absolute;

top:0px; /* in conjunction with left property, decides the text position */

left:0px;

width:309px; /* optional, though better have one */

height: 199px;

}

.image .text h1 a {

display: block;

color: rgba(0,255,255,0);

height: 199px;

}

The picture is also clickable but the title flickers when i move the mouse on the pic.

Link to comment
Share on other sites

  • 0

Well its probably not working because you have not implemented it correctly. There are so many unnecessary parameters in your css complicating things further. Post your markup and I will set it up for you. Even better post your files. Always start with a static page. Once you have everything working as required then proceed to integrate it with the server side. Why complicate the situation unnecessarily ?

Link to comment
Share on other sites

This topic is now closed to further replies.