88285

Stop an element moving with padding on hover

Question:

I'm trying to create a cool css3 effect where by when you hover over an image a border comes out from the middle of the image slowly. To do so I have a transparent border and then show the border and apply padding on hover, but when I add the padding it moves the image. Is there a way to keep the image from moving and still have the padding added on hover?

#dev:hover{ border:solid 3px #76c2af; padding:10px; } img{ position: absolute; left:64%; margin-left:-128px; border:solid 3px transparent; border-radius: 80px; transition-duration: 1s; -webkit-transition-duration: 1s; /* Safari */ }

Example - <a href="http://jsfiddle.net/kqWZZ/1/" rel="nofollow">http://jsfiddle.net/kqWZZ/1/</a>

Answer1:

You need to displace the padding added on hover.

It seems as though the best approach is to add a margin initially and then remove it on hover.

<a href="http://jsfiddle.net/JoshC/rzb47/" rel="nofollow"><strong>jsFiddle example</strong></a>

#dev { margin:10px; } #dev:hover{ border:solid 3px #76c2af; padding:10px; margin:0; }

This essentially displaces the 10px of padding.

For positioning purposes, I changed left:64% to left:33%.

Answer2:

You also add a padding on hover, which moves the image. So either add the padding also to the image without hover, or dont add any padding at all.

Answer3:

Why not transfer the padding attribute on the image itself but not on its hovering state?

I edited your fiddle. Check it <a href="http://jsfiddle.net/kqWZZ/1/" rel="nofollow">here</a>

img{ padding:10px; .... }

Recommend

  • How to capitalize first word in every sentence with Swift
  • How to access a PHP resource
  • Which On-Screen Keyboard for Touch Screen Application?
  • mock static without @RunWith(PowerMockRunner.class)
  • Angular folder structure and component services
  • Java : copy files efficiently with channel
  • how to make android sweeping second hand on analog clock?
  • How can I display a dialog on Currently visible activity on android?
  • Google fonts in React Native
  • DllImport, how to check if the DLL is loaded?
  • How to delete a kind in Google cloud datastore
  • How do I prevent a line break occurring before an unordered list?
  • ERROR: Could not find method armeabi-v7a() for arguments [arm64-v8a]
  • Global Array that Function Can Edit in VBA
  • java: console application main thread spawns a key listener thread
  • Fishpig Wordpress Magento Post issue
  • Making faster a Matlab code involving loop over big dimensions
  • JSLint unused variable error
  • Ping a Bluetooth device from an Android device
  • UI-Router default view inside div
  • Embed HTML tag in Flask WTForms field
  • ASP.Net MVC entity framework submit model, then open new model in edit page
  • How to share functions between components in angular?
  • Working with codeception and laravel
  • Get max bookings count in range
  • Saving CLLocation error: Mutating method sent to immutable object
  • Ways of filling 10 places with number from [1..10] such that digit at ith place has value atmost 1 m
  • Get the UTM tags with Facebook Marketing API
  • mssql script data insert or update
  • Filtering out choiceless polls in the Django tutorial causes polls in the index to duplicate
  • Php artisan optimize is failing on production server
  • Use AutoIt with java applications
  • opencv deskewing a contour
  • Does hibernate load two seprate copies of same instance if they are loaded twice from database?
  • LINQ to populate treeview based upon grouping
  • how to specify different css for ie
  • Typeahead.js does give me suggestions but doesn't select them
  • Drag and drop unicode TText in DelphiXe4
  • read part of h5 dataset python
  • convert json to excel in java