Can someone assist with CSS hover option - html

Question

I have a CSS hover problem - hover isnt working. Can you please check out the code ant tell me whats wrong?
<div class = "prof_line1">
<div class = "prof_image" id = "kristaps_pic">
<img src = "http://pokkers.lv/slakters/hhimages/krissprof.jpg"></img>
<p>Kristaps Slakters - Zvejsalnieks, Frizieris/stilists/kreatīvais direktors</p>
</div>
<div class = "prof_image" id = "alise_pic">
<img src = "http://pokkers.lv/slakters/hhimages/alise.jpg"></img>
<p>Alise Zvejsalniece Slaktere, House of Hair menedžeris</p>
</div>
</div>
<div class = "prof_info" id = "kristaps_info">
<p>Kristaps Slakters Zvejsalnieks Pasaules līmenī godalgots frizieris/ stilists/dizaineris kuram savu imidžu uztic Latvijas, Krievijas un Īrijas slavenības un mākslinieki. Daudz ceļojis un vācis pieredzi dažādās valstīs.</p>
<p><b>Studējis:</b> Rīgas Stila un Modes profesionālajā vidusskolā Baltijas Krievu Institūtā – vides dizainu. Colomer Akadēmijā Dubinā ieguvis Color Specialist Degree, 6 mēnešus pavadījis apmācībā „Tony and Guy” Akadēmijā, 2007- 2009 apguvis Barber profesiju „Hackett's Barber Academy”, 2011 ieguvis „American Crew” Creative Barber diplomu.</p>
<p><b>Apbalvojumi un godalgas:</b></p>
<p> hudge text box
</div>
Here is style and really dont understand why this is not working
.prof_info {
font-size:15px;
border:3px solid black;
width:914px;
margin-top:30px;
margin-left:50%;
transform:translate(-50%);
-webkit-transform:translate(-50%);
display:none;
z-index:1;
}
#kristaps_pic p:hover+#kristaps_info {
display:block;
}

Answer 1

The thing is... the + selector, selects the very below element after the p element. That´s why it´s not working. If you try something like this will work for sure:
#kristaps_pic:hover + #kristaps_info {
display:block;
}
Or if you want to hook the #kristaps_info just if hovering the p you have to alter a bit your markup to the following:
<div class = "prof_line1">
<div class = "prof_image" id = "kristaps_pic">
<img src = "http://pokkers.lv/slakters/hhimages/krissprof.jpg"></img>
<p>Kristaps Slakters - Zvejsalnieks, Frizieris/stilists/kreatīvais direktors</p>
<div class = "prof_image" id = "alise_pic">
<img src = "http://pokkers.lv/slakters/hhimages/alise.jpg"></img>
<p>Alise Zvejsalniece Slaktere, House of Hair menedžeris</p>
</div>
</div>
</div>

Answer 2

CSS worked otherwise.
.prof_info {
font-size: 15px;
border: 3px solid black;
width: 914px;
margin-top: 30px;
margin-left: 50%;
transform: translate(-50%);
-webkit-transform: translate(-50%);
display: none;
z-index: 1;
}
#kristaps_info {
display: none;
}
#kristaps_pic p:hover+#kristaps_info {
display: block;
}
<div class="prof_line1">
<div class="prof_image" id="kristaps_pic">
<img src="http://pokkers.lv/slakters/hhimages/krissprof.jpg">
<p>Kristaps Slakters - Zvejsalnieks, Frizieris/stilists/kreatīvais direktors</p>
<div class="prof_info" id="kristaps_info">
<p>Kristaps Slakters Zvejsalnieks Pasaules līmenī godalgots frizieris/ stilists/dizaineris kuram savu imidžu uztic Latvijas, Krievijas un Īrijas slavenības un mākslinieki. Daudz ceļojis un vācis pieredzi dažādās valstīs.</p>
<p><b>Studējis:</b> Rīgas Stila un Modes profesionālajā vidusskolā Baltijas Krievu Institūtā – vides dizainu. Colomer Akadēmijā Dubinā ieguvis Color Specialist Degree, 6 mēnešus pavadījis apmācībā „Tony and Guy” Akadēmijā, 2007- 2009 apguvis Barber
profesiju „Hackett's Barber Academy”, 2011 ieguvis „American Crew” Creative Barber diplomu.</p>
<p><b>Apbalvojumi un godalgas:</b></p>
<p> hudge text box
</div>
</div>
<div class="prof_image" id="alise_pic">
<img src="http://pokkers.lv/slakters/hhimages/alise.jpg">
<p>Alise Zvejsalniece Slaktere, House of Hair menedžeris</p>
</div>
</div>