this may be simple problem for you but it takes me whole day to try different approach to this problem-- the problem is when im trying to change the opacity of the container all the object and element changes the opacity i just want the container to be opacity changed., is there a way or any different approach to this problem?
Hi, @budang haba, Just create a new class, set the opacity in that class, and then apply the new class only to the container for which you want to set the opacity. If required, you might need to set CSS Specificity. Please read this article for a better understanding of specificity.If your issue is that when you set the opacity on main container, the contents inside that container also change, in that case you can try to set background color to you main container in RGBA instead of opacity.
ThanksGitansh Anand
IVE actually tried it but did not work for me though, rgb didnt too bcause im using a picture
@budang haba, Then try to do this: using Specificity, set opacity only on the image tag with a custom class; it will work.
I am attaching an OML; check the CSS and widget tree.
This should work @budang haba you can learn more specificity herehttps://www.freecodecamp.org/news/what-is-css-specificity/
Regards,Kshitij
still the same problem same elements get changed the opacity too
Hi, @budang haba, I looked at your OML, but it is very confusing. From what I could understand, you want to keep the opacity of your image at 0.5 initially, and when you hover on the image, the opacity should be 1. If I am correct, please refer to the updated OML; if not, please specify exactly what you want to achieve.
Hi!
When you change the opacity of a container in CSS the opacity property in CSS is inherited by all child elements. Here are two things you can try if you want to change the opacity of the container itself without affecting the child elements:
1. Using RGBA for the background color
2. Using a pseudo-element for background with the ::before or ::after selectors that covers the entire container, and applying the oppacity to this element.
thanks for the recommendation tried it but doesnt work to me.
Hi @budang haba could you please share the OML or URL?
Here it is sir
Instead of you giving the opacity property to that container, you can apply the background-color property using rgba, which includes opacity For example,background-color: rgba(240, 240, 240, 0.2);
You can adjust the highlighted value from the above image for opacity.
sorry for the confusion sir, i dont use the background color in a reason of im using photo i just want the background image photo to be opacity changed without affecting the image in the center
Does this container need to have opacity?
yes that waht im experimenting sir