Tagged: , , , , ,

Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • September 11, 2014 at 3:28 pm #317437
    gcol90

    Hey,

    What CSS do I need to add so that the hover on my masonry portfolio has a colour of my choosing, and the title appears in the centre, similar to this: http://peacheyphotography.co.uk/

    Many thanks.

    September 12, 2014 at 4:03 am #317796
    Josue

    Hey!

    Try adding this code to the Quick CSS:

    .av-masonry-entry:before {
    content: attr(title);
    background: red;
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 1000;
    text-align: center;
    line-height: 180px;
    opacity: 0;
    font-weight: bold;
    font-size: 24px;
}

.av-masonry-entry:hover:before {
    opacity: 1;
}

.av-masonry-entry:before{
    transition: all linear 0.2s;
}

    Cheers! 
    Josue

    November 26, 2014 at 12:33 am #358062
    sunjones

    Hi Josue,

    Can this be done with the standard portfolio grid as well?

    Best, David.

    November 26, 2014 at 1:34 am #358091
    Josue

    Hi David!

    Try with this:

    .image-overlay {
    display: none !important;
}
.grid-image:before {
    content: attr(title);
    background: red;
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 1000;
    text-align: center;
    line-height: 180px;
    opacity: 0;
    font-weight: bold;
    font-size: 24px;
}

.grid-image:hover:before {
    opacity: 1;
}

.grid-image:before{
    transition: all linear 0.2s;
}

    Cheers!
    Josue

    November 26, 2014 at 11:05 am #358214
    sunjones
    This reply has been marked as private.
    November 26, 2014 at 6:02 pm #358402
    sunjones
    This reply has been marked as private.
    November 26, 2014 at 11:58 pm #358660
    Josue

    Hey David!

    Use this:

    .image-overlay-inside:before{
	display: none !important;
}
.image-overlay {
    background: #ec1164;
}
.grid-image:before {
    content: attr(title);
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 1000;
    text-align: center;
    opacity: 0;
    font-weight: 200;
    font-size: 24px;
    color: #ffffff !important;
    top: 50%;
}

.grid-image:hover:before {
    opacity: 0.9;
}

.grid-image:before{
    transition: all linear 0.2s;
}

.grid-content {
    display: none !important;
}

    Cheers!
    Josue

    February 1, 2015 at 10:29 pm #389071
    gcol90

    Hi, sorry for the long response. Thanks for the code, but is there anyway to centre the text across all devices? When I shrink the browser down and the masonry grid shrinks, the title on each grid aren’t centered anymore.

    February 5, 2015 at 12:32 am #391025
    Elliott

    Hey!

    Hmm, they appear centered on my end on all screen sizes. Clear your browser cache and take a screenshot of what your seeing.

    Also let us know what operating system and browser your using.

    Regards,
    Elliott

    March 16, 2015 at 1:45 pm #412094
    victormontesdeoca

    Hi!
    Can i have the title, excerpt and read more button, in the hover of the blog grid?
    Like this theme: http://solopine.com/hickory/ but only in hover?

    Thanks!

    March 16, 2015 at 7:51 pm #412497
    Josue

    Hey!

    Can you post a link to your blog grid?

    Regards,
    Josue

    March 27, 2015 at 12:33 pm #419226
    victormontesdeoca

    Thats my blog grid:

    I did it by negative margin-top of the content.
    But i really wanna do it in a php way.

    Can you help me?
    Thanks!

    March 27, 2015 at 12:33 pm #419227
    victormontesdeoca

    Thats my blog grid:

    I did it by negative margin-top of the content.
    But i really wanna do it in a php way.

    Can you help me?
    Thanks!

    March 27, 2015 at 10:59 pm #419661
    Josue

    Hi!

    I think that’s a valid method, but i’d change it to position: absolute; top: 0; like:

    #block-post article .slide-content {
    position: absolute;
    top: 0;
}

    Regards,
    Josue

    March 30, 2015 at 1:39 pm #420383
    victormontesdeoca

    Yes! that was de plus I needed!
    Thanks!

  • Author
    Posts
Viewing 15 posts - 1 through 15 (of 15 total)
  • The topic ‘Masonry Portfolio hover colour and centre title’ is closed to new replies.