Need help? Check out our Support site, then


hover and onclick do not work with Custom Design CSS

  1. After reading several old posts on this forum, I added the following to my CSS:

    #wwf_grow img {
    	width: 150px;
    	height: 150px;
    }
    
    #wwf_grow img:hover {
    	width: 350px;
    	height: 350px;
    	color: #444;
    }
    
    #wwf_grow img:onclick {
    	width: 350px;
    	height: 350px;
    	color: #444;
    }

    ...with the following HTML:

    <a href="http://mikelunt.files.wordpress.com/2014/05/using-the-v-350x350.jpg"><img id="wwf_grow" src="http://mikelunt.files.wordpress.com/2014/05/using-the-v-350x350.jpg" width="150" height="150" /></a>

    Nothing occurs when interacting with the image. Some posts suggest the larger image name has to be explicitly stated in the CSS for wordpress.org, but that isn't effective for a large number of images.

    Any suggestions or explanations on how custom CSS works with wordpress.com [edit by thesacredpath] would be much appreciated. (Or, if there is an embarrassing typo in my syntax, I apologize in advance.) :-)

    The blog I need help with is mikelunt.com.

  2. BTW. This is wordpress.com site, not .org - typo in original post.

  3. Hi @mikelunt, can you explain exactly what you are trying to accomplish and I'll see if I can come up with the CSS to do that? Also, can you point me to a post or page where an image is you wish to do this with.

    onclick is not CSS, but HTML, and cannot be used within CSS.

  4. Thanks for the reply. Here's a test post:

    http://mikelunt.com/2014/05/12/test/

    p/w: testpost

    Essentially, I'm trying to get the image to expand from 150X150 to 350X350 when hovering or clicking, without opening a new window. From what I understand, we cannot use Javascript on wordpress.com sites, so I used suggestions from previous posts on CSS. Thanks again for the help....

  5. First, you need to edit the code you have in the post.

    1. Remove ?w=150&h=150 from the end of the img src URL.
    2. Change id="wwf_grow" to class="wwf_grow"

    Remove the CSS you have now and replace with the following:

    .wwf_grow:hover {
        width: 350px;
        height: auto;
    }
  6. @thesacredpath - That was very helpful, since the CSS actions are now being recognized; however, I'm unable to accomplish your first suggestion as this added attributes are added by WordPress.

    Here is exactly what's in the text area of the post:

    <a href="http://mikelunt.files.wordpress.com/2014/05/using-the-v-350x350.jpg"><img class="wwf_grow" src="http://mikelunt.files.wordpress.com/2014/05/using-the-v-350x350.jpg" width="150" height="150" alt="v"/></a>

    Here is what is rendered:

    <a href="http://mikelunt.files.wordpress.com/2014/05/using-the-v-350x350.jpg"><img class="wwf_grow" src="http://mikelunt.files.wordpress.com/2014/05/using-the-v-350x350.jpg?w=150&h=150" width="150" height="150" alt="v" /></a>

    Also, when I take the width and height attributes out in the post editing, this is what is rendered - a default width:

    <a href="http://mikelunt.files.wordpress.com/2014/05/using-the-v-350x350.jpg"><img class="wwf_grow" src="http://mikelunt.files.wordpress.com/2014/05/using-the-v-350x350.jpg?w=630" alt="v" /></a>

    I checked the "Don't use the theme's original CSS." box, and the extra width and height attributes were still added. I removed these extra attributes with the Chrome developer tools, and the zoomed image looks perfect. After searching for ways to remove the added attributes, I only see solutions for wordpress.org installations where the PHP can be modified; however, this seems to be quite a pervasive issue. Any suggestions?

    BTW. Thanks again for the help!

  7. What you can't find with a little searching. :) This is a bit tricky, but it gets the job done using only CSS and a little trickery in the HTML.

    1. Insert your images one right after the other into an unordered list. Insert the first image as a thumbnail, and the second larger image at "full-size". I would suggest using "none" for alignment on both.
    2. In the opening ul tag, add a class of "enlarge."
    3. Add a span tag, with the "hide" class in it around the HTML for the second larger image since WordPress will strip an empty span tag around image HTML for some reason, but adding a class lets the span tag stay.

    Here is a sample of what the code in the post or page should look like (there will be the image ID number where I have XXXX):

    <ul class="enlarge">
    <li><img class="alignnone wp-image-XXXX size-thumbnail" src="URL_OF_SMALL_IMAGE?w=150" alt="alt tag text" width="150" height="150" />
    <span class="hide"><img class="alignnone size-full wp-image-XXXX" src="URL_OF_LARGE_IMAGE" alt="alt tag text" width="350" height="350" /></span></li>
    </ul>

    Add the following CSS to your custom CSS.

    ul.enlarge {
        list-style-type: none;
        margin-left: 0;
    }
    ul.enlarge li {
        display: inline-block;
        position: relative;
        z-index: 0;
    }
    ul.enlarge span {
        position: absolute;
        left: -9999px;
    }
    ul.enlarge li:hover {
        z-index: 50;
        cursor: pointer;
    }
    ul.enlarge li:hover span {
        top: 0;
        left: 0;
    }

    Your enlarged image will come in clean and clear.

  8. @thesacredpath - This seems like it should work, but invariably, the zoomed image is the same size as the thumbnail. Even the source looks accurate, and the browser indicates the hover action is working. Here's a sample of the HTML, and I'm wondering if there is a misinterpretation of your suggestions.

    <ul class="enlarge"><li><img class="alignnone wp-image-921 size-thumbnail" src="http://mikelunt.files.wordpress.com/2014/05/using-the-v-100x100.jpg" alt="alt tag text" width="100" height="100" /><span class="hide"><img class="alignnone size-full wp-image-924" src="http://mikelunt.files.wordpress.com/2014/05/using-the-v-350x350.jpg" alt="alt tag text" width="350" height="350" /></span></li>
    </ul>

    CSS (w/ one small tweak, but the original CSS had the same issue)

    ul.enlarge {
    	list-style-type: none;
    	margin-left: 0;
    }
    
    ul.enlarge li {
    	display: inline-block;
    	position: relative;
    	z-index: 0;
    }
    
    ul.enlarge span {
    	position: absolute;
    	left: -9999px;
    }
    
    ul.enlarge li:hover {
    	z-index: 49;
    	cursor: pointer;
    }
    
    ul.enlarge li:hover span {
    	top: 0;
    	left: 0;
    }

    Thanks again, and wondering if a completely different solution would be easier...

  9. Hmmm, let me play with this. It was working on my test site and the CSS and code look fine.

    I don't know of any other solution since any others I can think of would require javascript or PHP and we can't use those here at WordPress.com.

  10. In thesacredpath's most recent example, try changing "display: inline-block;" to "display: block;" inside the section for "ul.enlarge li"

Topic Closed

This topic has been closed to new replies.

About this Topic