Replace Blog Post Titles with custom ''Image''

Site URL: https://caper-badger-3s6d.squarespace.com/blog/mytruth

Password: home

I wish to replace Blog post titles with custommade ''image''. I want different image on each blog post. 

Can anyone help?

Add to Design > Custom CSS

div.blog-basic-grid>article:nth-child(1) .blog-title {
    background-image: url(https://cdn.pixabay.com/photo/2021/02/03/14/52/woman-5978200__340.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    color: transparent;
}
div.blog-basic-grid>article:nth-child(2) .blog-title {
    background-image: url(https://cdn.pixabay.com/photo/2018/03/19/15/04/wet-3240211__340.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    color: transparent;
}

4 hours ago, tuanphan said:

Add to Design > Custom CSS

div.blog-basic-grid>article:nth-child(1) .blog-title {
    background-image: url(https://cdn.pixabay.com/photo/2021/02/03/14/52/woman-5978200__340.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    color: transparent;
}
div.blog-basic-grid>article:nth-child(2) .blog-title {
    background-image: url(https://cdn.pixabay.com/photo/2018/03/19/15/04/wet-3240211__340.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    color: transparent;
}

 

@tuanphan Thank you for replying! But I need the blog post images to be different on all blog posts, even in the different categories (like the code you gave me on blog thumbnail hover effect). Can you help me with the code for each blog post title within different catergories (My Truth / Lyrics / Behind My Lyrics)?

On 2/15/2021 at 8:21 PM, SolveigTraeet said:

@tuanphan Thank you for replying! But I need the blog post images to be different on all blog posts, even in the different categories (like the code you gave me on blog thumbnail hover effect). Can you help me with the code for each blog post title within different catergories (My Truth / Lyrics / Behind My Lyrics)?

@tuanphan Can you help me complete this?

@tuanphan Can you help me?

Try adding to Mytruth Page Header

<style>
  div.blog-basic-grid>article:nth-child(1) .blog-title {
    background-image: url(https://cdn.pixabay.com/photo/2021/02/03/14/52/woman-5978200__340.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    color: transparent;
}
div.blog-basic-grid>article:nth-child(2) .blog-title {
    background-image: url(https://cdn.pixabay.com/photo/2018/03/19/15/04/wet-3240211__340.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    color: transparent;
}
</style>

@tuanphan Thank you!