Click here to Skip to main content
15,886,689 members
Home / Discussions / Web Development
   

Web Development

 
AnswerRe: what is cell padding, and cell spacing? Pin
Subham Subhasis Patra3-Nov-18 9:28
Subham Subhasis Patra3-Nov-18 9:28 
AnswerRe: what is cell padding, and cell spacing? Pin
TheChewingTurkey18-Dec-18 1:30
TheChewingTurkey18-Dec-18 1:30 
Questionavoiding the use of SELECT * FROM information_schema Pin
Member 1399075319-Sep-18 13:02
Member 1399075319-Sep-18 13:02 
AnswerRe: avoiding the use of SELECT * FROM information_schema Pin
Mycroft Holmes19-Sep-18 19:02
professionalMycroft Holmes19-Sep-18 19:02 
Rant[REPOST] avoiding the use of SELECT * FROM information_schema Pin
Richard Deeming20-Sep-18 2:34
mveRichard Deeming20-Sep-18 2:34 
Questiontrying to make vertical css columns Pin
navyfalcon16-Sep-18 13:32
navyfalcon16-Sep-18 13:32 
AnswerRe: trying to make vertical css columns Pin
Richard Deeming18-Sep-18 3:50
mveRichard Deeming18-Sep-18 3:50 
Questionhover effect on picture on picture Pin
Member 1398101511-Sep-18 10:43
Member 1398101511-Sep-18 10:43 
Hello,

I am currently creating a website in the trial mode of squarespace. I had some trouble doing the things I wanted to do just using the squarespace templates, so I resorted to codes. I do not know much about codes and what I have got done so far is from researching online.
Basically what I have so far is an image with 4 icon images on top of it. (in code) I want to make it so when you hover over each of the of the icons a box from the left slides in and has text information regarding that icon. I want it to slide in from the left of the whole page, not just the picture these 4 icons are on. I cannot for the life of me figure this out.
Below is currently what I have done to create a picture with 4 images and some text on top. I have tried for 2 days to figure out where to ad in the overlay/hover "stuff" but it hasn't worked. I was up till 2 am last night trying different things. If someone could help would be greatly appreciated. Hope this all makes sense. P.S. I don't have any code in here for overlay/hover as it was not working. ANd I am using the Moshka template.
HTML
<html>
<head>
	<style>
	.doggrass
	{
		position: relative;
		top: 0;
		left: 0;
	}
	.bathtub
	{position: absolute;
		top: 190px;
		left: 70px;}
      
      .parkaccess
      {position: absolute;
        top: 190px;
        right:70px}
     
      .discounts
      {position: absolute;
        bottom:290px;
        left:70px }
     
      .events
      {position: absolute;
        bottom:290px;
        right: 70px}
      
      .dogpaw1 
      {position: absolute;
        top:20px;
        left: 15px}
      
      .dogpaw2
      {position: absolute;
        top:365px;
        left:15px}
      
      .dogpaw3
      {position: absolute;
        top:500px;
        left:15px}
      
      .bottom-left 
      {position: absolute;
        text-align: center;
        color: white;
    bottom: 275px;
    left: 62px}
      
      .top-left 
      {position: absolute;
  color: white;
  text-align: center;
    top: 235px;
    left: 77px;}
      
      .top-right 
      {position: absolute;
  text-align: center;
  color: white;
    top: 235px;
    right: 58px;}
      
      .bottom-right 
      {position: absolute;
  text-align:ceter;
  color:white;
    bottom: 275px;
    right: 74px;}
      
      .top-left2 
      {position: absolute;
        text-align: left;
          color:white;
        font-family:impact;
        top: 20px;
        left: 50px;
        right:50px }
      
      .top-left3 
      {position:absolute;
        text-align: left;
        color: white;
        top:95px;
          left: 50px}
     
      .bottom-right2
      {position:absolute;
      text-align: left;
        font-family:impact;
        color: white;
        left:50px;
        top:365px;}
      
      .bottom-right3
      {position: absolute;
        text-align:left;
        color:white;
        left:50px;
          top:395px;}
      
      .bottom-right4
      {position:absolute;
        text-align:left;
        color:white;
        font-family:impact;
        left:50px;
        top:500px}
      
      .bottom-left2
      {position:absolute;
        text-align:left;
        color:white;
        left:50px;
        top:530px}
	</style>
</head>
<body>
    <img src="https://static1.squarespace.com/static/5b8f261d5417fc3f4ba18707/t/5b9741d9575d1f202ba0b496/1536639456655/black+dog+3.jpg" width=400px; height=600px class="doggrass">
   
      <img src="https://static1.squarespace.com/static/5b8f261d5417fc3f4ba18707/t/5b96e0140e2e72b75cc40cea/1536614420600/white+bath.png" width=50px; height=50px class="bathtub">
      <img src= https://static1.squarespace.com/static/5b8f261d5417fc3f4ba18707/t/5b96dfe68985831b924b15ad/1536614374362/icons8-dog-park-90.png width=50px; height=50px class="parkaccess"/>
      <img src=https://static1.squarespace.com/static/5b8f261d5417fc3f4ba18707/t/5b96e01c0ebbe8ed91e62809/1536614428465/white+event.png width=50px; height=50px class="events"/>
      <img src=https://static1.squarespace.com/static/5b8f261d5417fc3f4ba18707/t/5b96dffb4ae2373cac59e9ab/1536614395019/icons8-pricing-96.png width=50px ; height=50px class="discounts"/>
      <img src=https://static1.squarespace.com/static/5b8f261d5417fc3f4ba18707/t/5b9745d91ae6cfbcdbd3a5ac/1536640473741/icons8-cat-footprint-filled-100.png width=25px; height=25px class="dogpaw1"/>
      <img src=https://static1.squarespace.com/static/5b8f261d5417fc3f4ba18707/t/5b9745d91ae6cfbcdbd3a5ac/1536640473741/icons8-cat-footprint-filled-100.png width=25px; height=25px class="dogpaw2"/>
      <img src=https://static1.squarespace.com/static/5b8f261d5417fc3f4ba18707/t/5b9745d91ae6cfbcdbd3a5ac/1536640473741/icons8-cat-footprint-filled-100.png width=25px; height=25px class="dogpaw3"/>

      <div class="bottom-left"><font size="">Discounts</font></div>
      <div class="top-left"><font size="">Baths</font></div>
      <div class="top-right"><font size="">Park Access</font></div>
      <div class="bottom-right"><font size ="">Events</font></div>
      <div class="top-left2"><font size="6">Membership Benefits</font></div>
      <div class="top-left3"><font size="4">Hover over icons below for more information</font></div>
  <div class="bottom-right2"><font size="6">Park Hours</font></div>
  <div class="bottom-right3"><font size="4">Monday-Friday 6AM-10PM</br> Saturday/Sunday 7AM-11PM</font></div>
  <div class="bottom-right4"><font size="6">Our Location</font></div>
  <div class="bottom-left2"><font size="4">Ridge Road 2210 </br>View Map</font>
  
    </div>
    
           
	</div>
</body>
</html>


modified 12-Sep-18 3:25am.

QuestionMFA bypass Pin
Member 1341109110-Sep-18 16:43
Member 1341109110-Sep-18 16:43 
AnswerRe: MFA bypass Pin
Richard MacCutchan10-Sep-18 21:12
mveRichard MacCutchan10-Sep-18 21:12 
QuestionWeekly Schedule...need Daily Tabs to open on that Day Pin
Member 1208020110-Sep-18 8:42
Member 1208020110-Sep-18 8:42 
AnswerRe: Weekly Schedule...need Daily Tabs to open on that Day Pin
Richard MacCutchan10-Sep-18 21:11
mveRichard MacCutchan10-Sep-18 21:11 
QuestionPush to talk Pin
nitrof7-Sep-18 10:34
nitrof7-Sep-18 10:34 
Questioncalling a WordPress plugin templates stored in theme directory Pin
Member 139746655-Sep-18 19:02
Member 139746655-Sep-18 19:02 
QuestionProblem with IE and Firefox Pin
Member 1396510030-Aug-18 6:13
Member 1396510030-Aug-18 6:13 
SuggestionRe: Problem with IE and Firefox Pin
Richard MacCutchan30-Aug-18 6:34
mveRichard MacCutchan30-Aug-18 6:34 
QuestionHow to post array of objects to oData Pin
Asif Rehman27-Aug-18 0:56
Asif Rehman27-Aug-18 0:56 
QuestionMonitoring Dashboard Pin
Member 1341109121-Aug-18 22:59
Member 1341109121-Aug-18 22:59 
QuestionUsing Vaxin Security on Microsoft Server 2016 Pin
Member 1229095118-Aug-18 3:09
Member 1229095118-Aug-18 3:09 
AnswerRe: Using Vaxin Security on Microsoft Server 2016 Pin
Nathan Minier20-Aug-18 1:39
professionalNathan Minier20-Aug-18 1:39 
QuestionBootstrap Admin Dashboards Pin
Networkrail17-Aug-18 8:11
Networkrail17-Aug-18 8:11 
QuestionTags for Developing for basic webpage Pin
Anandkota16-Aug-18 3:07
Anandkota16-Aug-18 3:07 
AnswerRe: Tags for Developing for basic webpage Pin
Richard MacCutchan17-Aug-18 21:43
mveRichard MacCutchan17-Aug-18 21:43 
QuestionBackend feature opinions Pin
jkirkerx13-Aug-18 13:18
professionaljkirkerx13-Aug-18 13:18 
Questioni don,t know properly that how to make a website responsive? Pin
Member 1394776213-Aug-18 5:13
Member 1394776213-Aug-18 5:13 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.