Unique Hover Image for Portfolio Item

Support
#1

Hi There,

I am about to create a series of portfolio items on this site

http://philipclayupgrade-com.stackstaging.com

When I hover over them I would like an image to appear that is uniqe for each item.

Previously (As in this post Previous Post ) I have used this global CSS to make the “View” image appear on all portfolio items. This time I want to go one step further. Can anyone help?

.entry-thumb:before {
position: center;
content: ‘’;
background: url(http://keighleyclay.com/wp-content/uploads/2018/01/VIEW-NEW-e1516307865382.jpg) center center;
background-size: contain;
}

#2

Hi There,

Thanks for writing in!

to make a separate image for each portfolio item needs separate CSS for each item.
Similar to the CSS you have for all the items.
Every item having its own unique class name and ID. By taking this as CSS sector you can write CSS for each item.

Now you can see the item you have, has a class name post-11 ID also same. This is the unique class for this item.
So the CSS should be.

.post-11 .entry-thumb:before {
background: url(http://keighleyclay.com/wp-content/uploads/2018/01/VIEW-NEW-e1516307865382.jpg) center center;
}

and the comon CSS should not have the background property.
Ex.

.entry-thumb:before {
position: center;
content: '';
background-size: contain;
}

Hope this helps!
If you want to learn how to check the class name or ID of an item please check this video.

Thanks

#3

Hi Basanta,

Thank you that is really helpful. I will get to work on this and let you know how I get on.

Kind Regards

Chris

#4

Thank you I can access and create individual images for each portfolio, that’s brilliant.

For now it puts the image inside a circle in a black square fitting over the image. Is there anyway to remove the black circle and just make the jpg appear on hover? a bit like below?

Thanks in advance

Chris

#5

Hello @claywebdev,

Thanks for updating the thread.

Please add following CSS under Pro > Theme Options > CSS to make the necessary changes:

.post-11 .entry-thumb:before {
    top: 14%;
    left: 9%;
    width: 380px !important;
    height: 290px !important;
    border-radius: 0;
    background-repeat: no-repeat;
    background-size: contain;
    background-color: #faf8f5 !important;
}

.post-11 .entry-thumb:hover {
    background-color: #faf8f5;
}

If you would like to learn CSS, I am sharing few resources that you take a look to get started with CSS and an interesting tool that you can use to speed up the development process.

I recommend you to watch following video that will help you to get started with CSS.

https://www.youtube.com/watch?v=MFR4WXiLzpc

Sometimes it can get a bit difficult to find out the right selector to be able to write the required CSS codes. A handy tool that can help you in this is Google Chrome dev tools. I am sharing the resource that you can refer to get started with dev tools.

https://developers.google.com/web/tools/chrome-devtools/css/

https://developers.google.com/web/tools/chrome-devtools/

https://www.youtube.com/watch?v=tP_kXBJWPhQ&t=200s

Thanks.

#6

Hi There,

Thank you so much for you support. I had to play around with heights widths and images to get it right , but this is what I ended up with:

>  .entry-thumb:before {
> position: center;
> content: '';
> background-size: contain;
> }

> .entry-thumb:before {
>     top: 0%;
>     left: 9% !important;
>     width: 105% !important;
>     height: 120% !important;
>     border-radius: 0;
>     background-repeat: no-repeat;
>     /*background-size: contain;*/
>     background-color: #FFFFFF !important;
> }

> .post-11 .entry-thumb:before {
> background: url(http://philipclayupgrade-com.stackstaging.com/wp-content/uploads/2018/07/Shaker-Kitchen-Title-Black_i.jpg) center center;
> background-repeat: no-repeat;
> background-size: 80% ;
> }

> .entry-title{
>   display:none;
> }

I’d have been way stuck without your support.

Here it is in the site

http://philipclayupgrade-com.stackstaging.com

Thanks so much

Chris

#7

Hi Chris,

I checked your site and the hover image seems to look okay now.

Were you able to get it sorted already?

#8

HI Jade,

I think so. Although I am seeing some slight differences when I zoom in to the page on a mobile phone size screen. I start to get a black band on the left hand side of the image. Not quite sure how to sort this bit out,

Otherwise it works great.

Chris

#9

Hey Chris,

Please find this code:

.entry-thumb:before {
    top: 0%;
    left: 9% !important;
    width: 105% !important;
    height: 120% !important;
    border-radius: 0;
    background-repeat: no-repeat;
    background-color: #FFFFFF !important;
}

And replace it with this:

.entry-thumb:before {
    top: 0;
    left: 0% !important;
    width: 100% !important;
    height: 100% !important;
    border-radius: 0;
    background-repeat: no-repeat;
    background-color: #FFFFFF !important;
    right: 0 !important;
    bottom: 0 !important;
    margin: 0 !important;
}

Cheers!

#10

Awesome, thank you Nabeel,

It works perfectly

Many thanks

Chris

#11

Glad we could help.

Cheers!

#12

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.