I'm trying to get a summary text to appear over an image on hover. Ideally I want the page name displayed permanently. On hover I want the name to jump up and the page summary to appear beneath it. So far I have a black bar appearing on hover with the name of the image as text. How do I fix this? My code is below:
It´s correct that you want the title tag text to switch position, when you hover. And with title tag you mean the litle text that become visible when you hover over the image with the mouse.
What I mean is the title will be visible on the picture all the time, then when I hover over the image with the mouse the title jumps up and the summary displays under the title - if that makes sense!
I have just make some dummy test, so perhaps you need to do some changes so it fetch your needs. By the way I have corrected your styling on the image, and closing the link tag correct.
How to get text over an image on hover
Hi All
I'm trying to get a summary text to appear over an image on hover. Ideally I want the page name displayed permanently. On hover I want the name to jump up and the page summary to appear beneath it. So far I have a black bar appearing on hover with the name of the image as text. How do I fix this? My code is below:
@foreach(var page in CurrentPage.Children.Where("Visible && DocumentTypeAlias == @0 ||DocumentTypeAlias == @1 || DocumentTypeAlias == @2 || DocumentTypeAlias == @3 || DocumentTypeAlias == @4 || DocumentTypeAlias == @5", "Cafe", "Chapter", "Stuchberystaffbriefing", "News", "Learninganddevelopment", "Services" ))
{
HtmlString summary = new HtmlString("");
dynamic image = null;
foreach(var apage in page.Children.Reverse().Take(1))
{
summary = apage.summary;
if (apage.HasValue("image"))
{
var dynamicMediaItem = Umbraco.Media(apage.image);
HtmlString summaryOfPage = summary;
<div class="home-page-box">
<div class="column w210 ">
<a class="hovertext" title="@summary" [email protected]><img src="@dynamicMediaItem.GetCropUrl("210Square")" alt="@dynamicMediaItem.Name" padding:5px 3px 5px 3px />
</div>
</div>
}
}
}
The CSS is:
a.hovertext {
position: relative;
width: 110px;
text-decoration: none !important;
text-align: center;
}
a.hovertext:after {
content: attr(title);
position: absolute;
left: 0;
bottom: 0;
padding: 0.5em 20px;
width: 170px;
background: rgba(0,0,0,0.8);
text-decoration: none !important;
color: #fff;
opacity: 0;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-o-transition: 0.5s;
-ms-transition: 0.5s;
}
a.hovertext:hover:after, a.hovertext:focus:after {
opacity: 1.0;
}
Thanks.
Tony
Hi Tony,
I have found this http://stackoverflow.com/questions/2011142/how-to-change-the-style-of-title-attribute-inside-the-anchor-tag on stackoverflow perhaps this can help you further.
It´s correct that you want the title tag text to switch position, when you hover. And with title tag you mean the litle text that become visible when you hover over the image with the mouse.
Hope this helps,
/Dennis
Hi Dennis
What I mean is the title will be visible on the picture all the time, then when I hover over the image with the mouse the title jumps up and the summary displays under the title - if that makes sense!
Thanks.
Tony
Hi Tony.
Okay I would try to get you a good starting point, to work with.
Then you CSS you should look something like this:
.home-page-box .w210 {
position:relative;
}
.home-page-box .w210 .summaryText {
display:none;
position:absolute;
bottom:0;
}
.home-page-box .w210:hover .summaryText {
display:block;
}
I have just make some dummy test, so perhaps you need to do some changes so it fetch your needs. By the way I have corrected your styling on the image, and closing the link tag correct.
Hope this helps,
/Dennis
Hi Dennis
That works a treat! Thanks. I only saw it now.
Thanks.
Tony
is working on a reply...