Hovering over parent element to display overlayed child element - html

Question

I have an image with a font awesome overlay of a plus. When I hover over the image (a tag) I want to display the plus, but I'm not sure if I have the correct css. The plus doesn't show when I hover over it!
Here is my code
a.registerTeacherAsHost:hover {
cursor: pointer !important;
opacity: 0.4;
}
a.registerTeacherAsHost:hover > .addTeacher {
display: normal;
}
<a class="registerTeacherAsHost" data-event-id=#Model.SpaceEvent.YogaSpaceEventId>
<div class="thumbnail">
<div>
<img class="img-responsive" src="~/Images/User_small_compressed_blue.png" style="position: relative; left: 0; top: 0;" alt="no teacher">
<i style="display:none; z-index: 200; position: absolute; top: 35%; right: 42%; color: grey;" class="addTeacher fa fa-plus fa-2x"></i>
</div>
</div>
</a>

Answer 1

Your CSS should look like this
a.registerTeacherAsHost:hover {
cursor: pointer !important;
opacity: 0.4;
}
a.registerTeacherAsHost .addTeacher { display: none; }
a.registerTeacherAsHost:hover .addTeacher {
display: block;
}
And the HTML
<a class="registerTeacherAsHost" data-event-id=#Model.SpaceEvent.YogaSpaceEventId>
<div class="thumbnail">
<div>
<img class="img-responsive" src="~/Images/User_small_compressed_blue.png" style="position: relative; left: 0; top: 0;" alt="no teacher">
<i style="z-index: 200; position: absolute; top: 35%; right: 42%; color: grey;" class="addTeacher fa fa-plus fa-2x">asd</i>
</div>
</div>
</a>
There were three problems with your code,
You were using the ">" selector which will only select the child element (.addTeacher) which is right after the parent element (.registerTeacherAsHost) which in you case doesn't work.
Other than that, the problem was with HTML where you declared the CSS for .addTeacher in the style tag, browsers take the CSS in this tag into consideration over any other stylesheets. One thing that could've worked was adding an !important to a.registerTeacherAsHost:hover .addTeacher { display: block !important; }. But it's better to write styles in a stylesheet and avoid using the !important as much as possible.
Next thing was, you were using display: normal which I've never heard of before and I think the browser hasn't too. display: block does the job.
Here's a fiddle: https://jsfiddle.net/5ncprd90/
Hope it helps!

Answer 2

There's been plenty wrong with your CSS which has been discussed already. I am focusing on a quick solution which goes here. Some adjustments have been made in the HTML structure and you are advised to avoid inline CSS. Hope this is what you are looking for.
a.registerTeacherAsHost{
display:inline-block;
}
a.registerTeacherAsHost:hover .thumbnail img {
cursor: pointer !important;
opacity: 0.4;
}
a.registerTeacherAsHost:hover i.addTeacher {
display: block;
cursor: pointer !important;
}
.thumbnail{
position:relative;
max-width:100%;
}
i.addTeacher{
display:none;
z-index: 200;
position: absolute;
top: 35%;
right: 42%;
color: grey;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<a class="registerTeacherAsHost" data-event-id=#Model.SpaceEvent.YogaSpaceEventId>
<div class="thumbnail">
<img class="img-responsive" src="https://www.shareicon.net/data/128x128/2015/09/24/106425_man_512x512.png" alt="no teacher">
<i class="addTeacher fa fa-plus fa-2x"></i>
</div>
</a>