Make a hot area tile with text and not image (joomla theme) - html

Question

I am using a Joomla theme by rockettheme and I was able to find and reproduce a class of that theme in the demo-styles.less file of the template.
So I made a demo-styles-custom.less for my website and added the following code into it:
// Demo Image
.al-image {
position: relative;
}
.al-image img {
max-width: 100%;
height: auto;
box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2), 0 0 1px rgba(0, 0, 0, 0.2);
}
.al-image object {
max-width: 100%;
height: auto;
box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2), 0 0 1px rgba(0, 0, 0, 0.2);
}
// MainBottom Images
.al-image-description {
color: #fff;
opacity: 0;
position: absolute;
top: 0;
left: 0;
width: 100%;
z-index:1000;
.transition(opacity 0.5s ease-out);
span {
margin-top: 25px;
margin-left: 15px;
line-height: 0.5em;
}
h4 {
padding: 0 15px;
margin-top: 15px;
margin-bottom: 8px;
font-family: 'SourceSansProExtraLight',Helvetica,Arial,sans-serif;
font-size: 2.8em;
font-weight: normal;
line-height: 1.1em;
}
p {
padding: 0 15px;
font-size: 1.5em;
}
a.readon {
margin-left: 15px;
span {
margin-left: 0;
}
}
}
.al-image:hover .al-image-description {
background-color: rgba(1, 197, 255, 0.3); //#01C5FF
// color: #FFFFFF;
bottom: 0;
opacity: 1 !important;
}
That Creates a very nice tile which when hovered over displays the contents of al-image-desciption and displays a "read more" button which is clickable. The a.readon at the bottom there is defined in the styles files of the joomla template I'm using so no need to worry about that.
Anyway, it works great with an img, however if I wanted to add some text it doesn't work as good. I added the object parameters (at al-image object{}) and it creates the text but when hovering the description only covers the small text I'm using. Not the whole square area the image was occupying. I thought I could add a background image and have the text placed on top of that image but background images do no respond the same as images. They are confined to the size of the text. The result is really ugly and you can see that in the attached images below.
Is there a way to make text use the same space as an image? I want it to work as all the other image tiles, just have the ability to write text on it.
(it seems that I need 10 rep to post images so I will only post the links to them)
Image 1 When I hovered the tile I want to fix and next to it are the tiles that work ok with plain images
Image 2 when I hovered over one of the tiles that work, (plain images) to show description and not hovered the tile I want to fix
From the images you can see that the tile that's not working for me has a compressed background image. The HTML code I used to create the tile in a module is the following:
<div class="al-image">
<object id="image-with-text" style="background-image: url('/images/Stores/CoverSQ.jpg');">hello all</object>
<div class="al-image-description">
<span class="icon-shopping-cart rt-big-icon"></span>
<h4>Store</br>Renovation</h4>
<p>fast delivery times</p>
<a class="readon" href="index.php/en/activities/store-renovation"><span>Read More</span></a>
</div>
</div>
While for the rest of the tiles, the code used there is:
<div class="al-image">
<img src="/images/Office_Renovations/CoverSQ.jpg" alt="Office Renovation" />
<div class="al-image-description">
<span class="icon-group rt-big-icon"></span>
<h4>Office</br>Renovation</h4>
<p>Uninterruptable deploy®</p>
<a class="readon" href="index.php/en/activities/office-renovation"><span>Read More</span></a>
</div>
</div>
Hope I described it well. I would appreciate any help I can get.
Thank you.

Answer 1

i think it would solve your problem if you just use position:absolute;, width: 100%; and height: 100%; on your object element. And define width and height on the al-image container ... or just define them on the object. Something along the lines of this fiddle:
http://jsfiddle.net/WQEAW/

Answer 2

ok I seem to have found a solution to my own problem! That should help people facing the same problem...
I found that I can do what I need using the followin code:
<div class="al-image">
<object id="image-with-text">
<img src="/images/Stores/CoverSQ.jpg" alt="image" />
<div style="position:absolute; top:50px; left:20px; width:60px; height:25px">
<center>
<font size="+2" color="00ff00">Looking Into The Future</font>
</center>
</div></object>
<div class="al-image-description">
<span class="icon-shopping-cart rt-big-icon"></span>
<h4>Store</br>Renovation</h4>
<p>fast delivery times</p>
<a class="readon" href="index.php/en/activities/store-renovation"><span>Read More</span></a>
</div>
</div>
That code will display the text "Looking Into The Future" at the position 50,20 off the top left part of my image with a width of 60 pixels.
You can also use percentages for that for example:
<div style="position:absolute; top:30%; left:20%; width:40%; height:25px">
Which will help when resizing the browser for a responsive theme.
Cool. Now all I need to do is make the images I need and use transparency and it should work!
I want to thank all those who gave time to my question even though they didn't find the solution. Besides it only was here for a few hours.
I also want to thank Martin Turjak who gave an answer. It was the correct one too. I had found the solution a bit before he answered, however I had to wait for 8 hours to post it here as a solution. I'm posting it anyway cause I believe that with the included code it's much more useful to people facing the same problem. I believe that it will also work for many of the rockettheme's templates so feel free to use it.
If anyone wants I can send the custom .less files I made for my theme and they can use them as they are, without worrying about the coding at all. Of course you need to be using the theme for them to work but I believe that there are enough people out there with the rockettheme's template.