I've been trying to find where a hover transition has been added in a WP theme so I can customize/disable the effect but I can't seem to find it. Can you help?
The website is here: http://www.thisisutil.com/journal/ The effect I want to customize/disable is the hover effect on the post images.
I found this by starting at the image and keep adding hover attributes until I see it pop up.
Another tool that could help you is the animation drawer:
Related
I recently started learning Tailwind CSS because based on some research about the job market, I felt like it would be a nice marketable skill for my area.
Anyway, I am currently making a website in which I am trying to restrict myself from writing any other CSS classes apart from the ones given to me by Tailwind (In order to familiarize myself with "Tailwind Solutions" to certain problems). However I am kind of running into a dead end with a specific "issue".
I have a couple of circle "buttons" (they are images to be precise, but they have an "onClick" action). Instead of letting the user stumble upon the existence of this button randomly, I wanted to add a hover effect to the button so that a shadow appears around the image when the pointer is hovered on top of the image.
I have only tried the straightforward hover: shadow-sm class but I kind of expected this not to work because this is labeled in the Tailwind Docs as a "box-shadow". However I couldn't find anything else that could be applied in my case.
Any help would be appreciated.
Thank you in advance.
I played around with positioning & created this shadow on hover.
Check out and keep me posted in the comments below.
I'm embedding a YouTube <iframe> in my website. I would like to delete the gray gradient shadow under the title of the video but can't seem to find how.
I did a lot of research on this but found that you can't remove the title anymore. I was wondering if you can still remove the gray shadow under the title. I just want the video to look clean with a play button and I'd add a drop shadow behind it. I need this because this is in line with my design of my website.
Playing with inspect element I found that .ytp-gradient-topis the class that causes the gradient shadow, I just don't know how to get rid of it.
Any help is appreciated!
Gradient shadow I want to remove
You can't change the CSS of an element within the iframe due to the same origin policy.
At the .shadow class add text-shadow:none and remove the remaining tags that are not working. There are no shadows for that iframe after you add this !
Hope this is what you are looking for...
So currently here: http://pixphoriad.haneuri.net/header.php
I have a link hover effect on the top five links that I snagged online somewhere.
What I want to do is add a smooth css drop down menu from the "Resources" link but when I tried to play with it, nothing worked. I don't understand a whole lot that's going on with that current code in regards to that hover, and I'd like the link hover to stay the same, just have a drop down menu with links when hovered over.
I'm using flexslider to display a list of elements which are quite complex.
Basically each item has:
a background image in position: absolute
a foreground containing text and images
I have the following issue (only in Chrome): the foreground goes to the back during sliding transition and then comes back to front when the transition is finished.
Do you have any idea of investigation paths for this issue?
After reading https://github.com/woothemes/FlexSlider/issues/179 I solved the issue by using the following option at slider creation:
useCSS: false
I'm working on a portfolio site and want portfolio pieces to have a fancy rollover.
I've made a pen of what I have so far. My issue is that the Visit Site link isn't clickable. I have no idea why, but I think it may be something to do with the z-index change or the transition effect. It was working before when I used a simple slide-up over the image effect.
Any ideas how to get this link clickable?
Thanks!
just add
backface-visibility:hidden;
-webkit-backface-visibility:hidden;
-moz-backface-visibility:hidden;
-ms-backface-visibility:hidden;
to .default-view and it works :)