1 reply · opened Jan 3, 2017
Hi, I have one thing I am struggle with. How do you achieve this: http://prntscr.com/dqtgo0
I want to have 3 pictures positioned as illustrated. Top photo I point, then the text is underlined and the picture a little darker.
But I did not manage it and not getting the pictures nicely positioned as the example above.
Please help me with this.
Greetings
Hello,
Consider using the following HTML code:
[
California
23 Properties
](#)
[
New York
12 Properties
](#)
[
San Francisco
8 Properties
](#)
and then the following CSS Code:
.justified-banners [class^=col-] {
position: relative;
margin-bottom: 30px;
}
.justified-banners [class^=col-] > a {
display: block;
position: relative;
height: 250px;
background-color: #EEE;
}
.justified-banners [class^=col-] img { display: block; }
.justified-banners [class^=col-] > a:before {
content: '';
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: rgba(0,0,0,0.3);
opacity: 0;
-webkit-transition: opacity .3s ease;
-o-transition: opacity .3s ease;
transition: opacity .3s ease;
}
.justified-banners [class^=col-] > a:hover:before { opacity: 1; }You can change the Positioning of the Text based to your needs.
This will definitely work fine. Let us know if we can help you with anything else or if you find any further issues.
Have the same question, or something new?
Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.
Reply on the dashboard