Jump to content

Mark Laurence

Members
  • Posts

    5
  • Joined

  • Last visited

Posts posted by Mark Laurence

  1. The page in question is Here

    For the life of me, I cannot get rid of the bottom overhang.

    Any suggestions? I is it possible at all?

    <!-- THUMBNAIL -->
    
    <style>
    
    div.gallery {
        margin: 4px;
        float: left;
        width: 180px;
    }
    div.gallery:hover {
        	box-shadow: 2px 0px 2px 0px rgba(0, 0, 0, .2), 0 0px 0px 0 rgba(0, 0, 0, 0.2);
    }
    
    div.gallery img {
        width: 100%;
        height: auto;
    }
    
    </style>

     

  2. The page in question is Here

    I'm going to have a dozen or so images that I want lined up grid-style. They'll all be sized the same. But, I also want to have the hover overlay that's currently there. 

    CSS is currently: 
     

    <!-- THUMBNAIL -->
    
    <style>
    
    .container {
    	position: relative;
    	width: 50%
    }
    
    .image {
    	display: block;
    	margin: 3px;
    	width: 50%;
    	height: auto;
    }
    
    .overlay {
    	position: absolute;
    	top: 0;
    	bottom: 0;
    	left: 3px;
    	right: 0;
    	height: 100%;
    	width: 50%;
    	opacity: 0;
    	transition: .5s ease;
    	background-color: #000000; 
    }
    
    .container:hover .overlay {
    	opacity: 1;
    }
    
    .text {
    	color: white;
    	font-size: 20px;
    	position: absolute;
    	top: 50%;
    	left: 50%;
    	transform: translate(-50%, -50%);
    	-ms-transform: translate(-50%, -50%);
    }
    
    </style>

    HTML for each image is:

    <div class="container">
    		<a href="../images/thankyounotes/football_equipment.jpg" data-lightbox="kidswehelp" data-title=""><img id="football" src="../images/thankyounotes/football_equipment.jpg" class="image"></a>
    			<div class="overlay">
    				<div class="text">Testing This</div>
    			</div>
    		</div>

    Thoughts? 
     

  3. I recently took over somebody else's website and am trying to get an element to size up and down when the window changes size. I tried to add Position: Absolute; to no avail. I currently have it as Position: Fixed so it moves with the scroll.

    Specific page is here  and I'm referring to the three sidebar nav menus on the left.

    
    #mySidenav a {
        position: fixed; /* Position them relative to the browser window */
        left: -25px; /* Position them outside of the screen */
        transition: 0.3s; /* Add transition on hover */
        padding: 15px; /* 15px padding */
        width: 200px; /* Set a specific width */
        text-decoration: none;
        text-align: center;
        font-size: 18px; /* Increase font size */
        color: white; /* White text color */
        border-radius: 0 5px 5px 0; /* Rounded corners on the top right and bottom right side */
    }
    
    #mySidenav a:hover {
        left: 0; /* On mouse-over, make the elements appear as they should */
        text-decoration: underline;
    }
    
    #board {
        top: 320px;
        background-color: #5d2a2c;
    }
    
    #blog {
        top: 380px;
        background-color: #5d2a2c;
    }
    
    #kidswehelp {
        top: 440px;
        background-color: #5d2a2c;

    Any help would be beyond amazing.

×
×
  • Create New...