Movement for Pictures
-
Hi, is there a way to allow for movement on pictures I insert into my pages? I am using the collective theme and using some pictures to link to other pages on my site and would like a little movement to make the site more interesting. Thank you!
The blog I need help with is: (visible only to logged in users)
-
What do you mean by movement? Like a photo bouncing? It sounds like a java script kind of thing but knowing exactly what you’re looking for would help me be better able to search for a solution.
-
Also read these please http://en.support.wordpress.com/custom-design/#frequently-asked-questions
-
We cannot link gallery images to specific pages or posts or to external URLs either https://en.forums.wordpress.com/topic/link-gallery-images-to-pages-and-or-posts-or-external-url?replies=44
-
When I mouse over a picture I just want it to move some. Like the “team member” pictures do in the collective theme. Since my theme already uses that feature I thought I might be able to have the same thing happen to pictures I post.
-
You could potentially use CSS animations, what exactly do you want your images to do? Could you link to another site that contains an example of the type of movement you’d like?
-
Honestly, I don’t really care exactly what they do. I just want some sort of movement so my page isn’t so boring. Like the pictures here http://collectivedemo.wordpress.com/
Thanks!
-
It’s hard to give you specific examples as I can’t see your site and I can’t find a good example on the theme’s demo site. If you’re comfortable with doing so could you invite me to view it and then I can give you some specific CSS.
-
Add this to your CSS and then have a look at your Research Park post to see it in action. It’s not perfect (the height change making the elements below it slide down is a bit of a pain) but it’s a start!
.wp-caption img { width:90%; animation:width 1s ease 0.2s; } .wp-caption img:hover { width:100%; } -
Very cool, thank you! What do I have to change to make it so my “Why Fox” “Connect with Us” and “Available Space” pictures on my home page to do the same thing?
-
Have you manually written the HTML for that top section? I’m not familiar with your theme as it’s a paid one but it looks like that section could do with quite a lot of tidying up before you apply any CSS transitions to it.
You have h3 heading elements for your menu on the left with lots of unnecessary span and strong tags nested inside where a simple ul list would do. The image links seem to have gotten the same treatment.
Here’s the format I would use (you’ll need to replace your link text and the image and link URLS!):
<ul id="newtitlemenu"> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> <li><a href="#">Link 3</a></li> <li><a href="#">Link 4</a></li> </ul> <ul id="newtitleimages"> <li><a href="#"><img src="URL_1" /></a></li> <li><a href="#"><img src="URL_2" /></a></li> <li><a href="#"><img src="URL_3" /></a></li> </ul>And this is how you could try styling it all with your custom CSS so your HTML stays tidy, and much more digestible for search engines too!
#newtitlemenu, #newtitleimages { float:left; margin:0; padding:0; } #newtitlemenu { width:25%; } #newtitlemenu li { list-style:none; padding:0; line-height:3em; text-align:left; } #newtitlemenu a { color:#fff; font-size:32px; text-decoration:underline; font-family:chunk-1,chunk-2,"Helvetica Neue","Arimo",Helvetica,Arial,sans-serif; } #newtitleimages { width:75%; } #newtitleimages li { display:inline-block; } #newtitleimages img { height:200px; width:auto; transition:transform 0.5s ease 0.2s; } #newtitleimages img:hover { transform:rotate(5deg); }
- The topic ‘Movement for Pictures’ is closed to new replies.
WordPress.com Forums 