Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Custom CSS on main page of website


Morgan2020

Question

Site URL: https://www.morgangregory.com

I've been trying for months to try and add some sort of Custom CSS to my main page on my site- not an additional gallery that all the tutorials do it on. Nothing seems to help me. All I want to do is add a text hover over the images on that page, instead of have the page title underneath the image/link (see attached image for example). To make my homepage more exciting, as you can't change the template of your site without starting a new one and a new billing plan etc.

Could this depend on the template/design you use? Or is it just a fact you simply can't change anything on you main page? -You're stuck with that design and that's it.

Screenshot 2021-02-28 at 17.38.06.png

Link to post
  • Answers 4
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Posted Images

4 answers to this question

Recommended Posts

  • 0

Hi. Add to Design > Custom CSS

/* Portfolio page hover */
a.grid-item {
    position: relative;
}
.portfolio-text {
    position: absolute !important;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%,-50%);
        -ms-transform: translate(-50%,-50%);
            transform: translate(-50%,-50%);
    width: 100%;
    text-align: center;
    z-index: 999;
    opacity: 0;
}
a.grid-item:hover .portfolio-text {
    opacity: 1;
}

 

Link to post
  • 0
On 3/16/2021 at 9:25 PM, Morgan2020 said:

Wow thank you!

Is there a way I can make the hover a solid colour or adjust the font at all?

Hi. Sorry for the delay. Do you still need code for solid color yet?

Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...