Working with hover background Change on a DIV - css

Question

I've been trying to achieve the effect of mouse over on a picture which dims its background and brings over a text on top.
Then I wanted a nice centralized text when I moused over.
These both things were achieved, but then I ran into two small problems.
How can I not dim the text on top when I dim the background of the picture
How can I centralized the text without specifying width and height of the picture (to enable responsive design)
HTML
<div id="bottomWide">
<ul>
<li class="first">
<img src="http://127.0.0.1/www/media/wysiwyg/sub-head1.jpg" alt="">
<div class="all-canvas">
<div class="all-text">
<span class="title">A Heading</span><br>
<span class="text">Couples of Lines of Text will come here</span><br>
<span class="shop">See Details.</span>
</div>
</div>
</li>
<li class="second">
<img src="http://127.0.0.1/www/media/wysiwyg/sub-head1.jpg" alt="">
<div class="all-canvas">
<div class="all-text">
Some text here, style as needed
</div>
</div>
</li>
</ul>
</div>
CSS
#bottomWide{
width:100%;
margin:0 auto;
}
#bottomWide ul{
margin:0;
padding:0;
}
#bottomWide li{
list-style-type: none;
display: inline-block;
width:50%;
text-align:justify;
float: left;
/* For Mouse Over*/
position: relative;
display: inline-block;
}
#bottomWide li:last-child img {
border-left: 4px solid #fff;
}
#bottomWide img{
width:100%;
}
#bottomWide li div.all-canvas{
position: absolute;
top: 0;
left: 0;
/* 100% will equal the dimensions of the image, as nothing else will be inside the .container */
width: 100%;
height: 100%;
color: #fff;
background-color: #000;
opacity: 0;
/* This will create the fade effect */
transition: opacity 0.3s;
-webkit-transition: opacity 0.3s;
/* Include all required vendor prefixes for opacity and transition */
margin: 0 auto;
}
#bottomWide li:last-child div.all-canvas {
margin-left: 4px;
}
#bottomWide li div.all-canvas:hover {
opacity: 0.7;
}
#bottomWide li:last-child div.all-canvas:hover {
opacity: 0.7;
margin-left: 4px;
}
div.all-text {
height:358px; /* This is what I want to change to %*/
width: 623px; /* This is what I want to change to %*/
text-align:center;
border:1px solid silver;
display: table-cell;
vertical-align:middle;
margin: 0 auto;
}
div.all-text span.title { padding: 3px; font: 18px/1.35 "Open Sans", Helvetica, sans-serif; text-transform: uppercase;}
The Output looks something like this:-
(Notice the dim text on top of the picture; hoping to make it solid)
Thanks.

Answer 1

If you set opacity to an element, all children (including the text) will have the opacity as well. You could try changing the background color using rgba:
#bottomWide li div.all-canvas:hover {
background-color: rgba(0,0,0, 0.7);
}
You'll still need to toggle opacity 0 to 1 so it can become visible, but the background-color should be transparent.
Centering the text will be a lot more tricky because you're trying to make it responsive. Since the text won't have a fixed height, you will probably have to use Javascript to calculate it. You could start with this CSS:
.theText {
position: absolute;
top: 50%;
margin-top: -20px; // Should be half of the element height
}
You'll have to use javascript to measure the height of .theText and set a negative margin-top accordingly...